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>

正如我上面提到的那样，我根据堆栈溢出发布的答案写了这些。我不擅长javascript或jquery。所以如果你指出我的问题会很好。我很欣赏它

Answer 1

不是存储当前播放id元素的audio，而是在播放新元素时将它们作为一个组暂停来简化逻辑：

$(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');
        }
    });
});

Answer 2

尝试类似

的内容

$(function () {
    var curAudio;
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];

        if (curAudio && song != curAudio && !curAudio.paused) {
            curAudio.pause();
            $(curAudio).prev().html('<i class="fa fa-play"></i> Play');
        }

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

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

2 个答案: