jquery - 用HTML5一次播放一首歌曲

Question

我正在制作一个包含许多音频元素的html5站点，并且希望一次播放一个，为了做到这一点，我使用jQuery暂停并播放了这首歌。

我在这里找到了可以执行此操作的代码，但是该线程已经死了2年了。

问题是当我播放一首歌时，我们将其命名为song1，然后将其暂停，然后再次尝试播放song1，song1无法开始再现，要再次播放song1，我必须再现任何其他歌曲，然后单击song1再次播放，因此可以开始播放。我不确定如何解决此问题。不这样做怎么办？

提前谢谢了。

HTML:

<div id="song">
    <a class="playback">
        <img class="play" src="./MusicPlayer/base.png" />
    </a>
    <audio><source src="./MusicPlayer/avicii.mp3" type="audio/mpeg" /></audio>
</div>
<div id="song2" >
    <a class="playback">
        <img class="play" src="./MusicPlayer/base.png" />
    </a>
    <audio><source src="./MusicPlayer/harlem.mp3" type="audio/mpeg" /></audio>
</div>

Javascript:

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
       e.preventDefault();
       var song = $(this).next('audio')[0];
       if (song.paused) {
           song.play();
           if (curPlaying) {
               $("audio", "#" + curPlaying)[0].pause();
           }
       } else {
           song.pause();
       }
       curPlaying = $(this).parent()[0].id;
    });
});

Answer 1

试试这个:

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
       e.preventDefault();
       var song = $(this).next('audio')[0];
       if (song.paused) {
           if (curPlaying) {
               $("audio", "#" + curPlaying)[0].pause();
           }
           song.play();
           curPlaying = $(this).parent()[0].id;
       } else {
           song.pause();
           curPlaying = null;
       }
    });
});

问题是这样的流程:

1)播放歌曲1(curPlaying == song1)

2)暂停song1(curPlaying仍设置为song1)

3)播放song1(因为curPlay仍然是真实的，因此song1立即暂停了)

无论如何，已经很晚了，我精疲力尽，所以我的代码可能实际上不起作用(糟糕)。但希望其余答案能使您走上正确的道路。