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（因为curPlaying仍然是真的，song1立即暂停）

无论如何，它已经很晚了，我已经筋疲力尽，所以我的代码实际上可能无法正常工作（oops）。但希望答案的其余部分能让你走上正轨。

在HTML5中一次播放一首歌曲

1 个答案: