javascript - 使用 Jquery/Javascript 进行多实例音频播放

Question

   <form action="downloads_new.php" method="post">
Track Name :- <b>i run this bitch</b><br />
    By :- <a href="profile.php?id=17">DJ Harsha</a><br />
           <div id="22">
        <button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
        <audio src="memberfiles/17/i run this bitch.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
               </div>
    <input type="hidden" value="i run this bitch.mp3" name="file_name">
    <input type="hidden" value="bWVtYmVyZmlsZXMvMTcvaSBydW4gdGhpcyBiaXRjaC5tcDM=" name="link">
</form>
<br>

<form action="downloads_new.php" method="post">
Track Name :- <b>ai se eu tei pego</b><br />
    By :- <a href="profile.php?id=16">DJ perera</a><br />
           <div id="21">
        <button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
        <audio src="memberfiles/16/ai se eu tei pego.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
               </div>
    <input type="hidden" value="ai se eu tei pego.mp3" name="file_name">
    <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYWkgc2UgZXUgdGVpIHBlZ28ubXAz" name="link">
</form>
<br>

<form action="downloads_new.php" method="post">
Track Name :- <b>Krewella - Live for the night</b><br />
    By :- <a href="profile.php?id=16">DJ perera</a><br />
           <div id="20">
        <button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
        <audio src="memberfiles/16/Krewella - Live for the night.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
               </div>
    <input type="hidden" value="Krewella - Live for the night.mp3" name="file_name">
    <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvS3Jld2VsbGEgLSBMaXZlIGZvciB0aGUgbmlnaHQubXAz" name="link">
</form>
<br>

<form action="downloads_new.php" method="post">
Track Name :- <b>bella vita</b><br />
    By :- <a href="profile.php?id=16">DJ perera</a><br />
           <div id="19">
        <button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
        <audio src="memberfiles/16/bella vita.mp3">
            Your browser does not support HTML5 audio.
        </audio>
        <button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
               </div>
    <input type="hidden" value="bella vita.mp3" name="file_name">
    <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYmVsbGEgdml0YS5tcDM=" name="link">
</form>
<br>

这是我的 html，我用它来让访问者下载或播放/暂停音乐。这些隐藏的输入用于下载轨道。

这是我的 javascript 来播放和暂停音乐。我从堆栈溢出问题中获取了这段代码，并对其进行了修改，相应地更改了按钮文本

var curPlaying;
  $(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];
        if (song.paused) {
            song.play();
            $(this).html('<i class="fa fa-pause"></i> Stop');
            if (curPlaying) $("audio", "#" + curPlaying)[0].pause();

        } else {
            song.pause();
            $(this).html('<i class="fa fa-play"></i> Play');
        }
        curPlaying = $(this).parent()[0].id;
    });
  }); 

上面的脚本完美运行，没有任何问题。如果用户尝试播放新轨道，它会暂停任何其他音轨。然而，当播放轨道暂停时，问题就会出现。除非用户单击另一个播放，否则无法恢复。然后播放该轨道(无法恢复的轨道)。

但是我注意到，当我像这样移动轨道 ID 时，它会播放并暂停轨道，但会同时播放多个轨道。

<form action="downloads_new.php" method="post">
<div id="21">
    Track Name :- <b>ai se eu tei pego</b>
    <br />By :- <a href="profile.php?id=16">DJ perera</a>
    <br />
    <button class="playback btn btn-primary btn-sm"><i class="fa fa-play"></i> Play</button>
    <audio src="memberfiles/16/ai se eu tei pego.mp3">
        Your browser does not support HTML5 audio.
    </audio>
    <button class="btn btn-sm btn-success" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
    <input type="hidden" value="ai se eu tei pego.mp3" name="file_name">
    <input type="hidden" value="bWVtYmVyZmlsZXMvMTYvYWkgc2UgZXUgdGVpIHBlZ28ubXAz" name="link">
</div>

正如我上面提到的，我根据 Stack-overflow 上发布的答案编写了这些内容。我不擅长 javascript 或 jquery 。所以如果你指出我的问题就好了。我非常感激

Answer 1

您可以通过在播放新元素时将它们作为一组暂停来简化逻辑，而不是存储当前正在播放的 audio 元素的 id:

$(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var $playback = $(this);

        $('audio').not(this).each(function() { $(this)[0].pause(); });
        var audio = $(this).next('audio')[0];
        if (audio.paused) {
            audio.play()
            $playback.html('<i class="fa fa-pause"></i> Stop');
        }
        else {
            audio.pause();
            $playback.html('<i class="fa fa-play"></i> Play');
        }
    });
});