<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 .im上发布的答案写的那些,我不擅长javascript或jquery。所以如果您向我指出问题会很好。我不胜感激

最佳答案

尝试类似

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

07-24 09:44
查看更多