1

我正在制作一个包含许多音频元素的 html5 网站，我希望一次播放一个，为此我使用 jQuery 暂停和播放歌曲。

我在这里找到了一个允许我这样做的代码，但是该线程已经死了 2 年。

当我播放一首歌曲时出现问题，我们将其命名为 song1，然后暂停它，然后再次尝试播放歌曲 1，歌曲 1 没有开始再现，为了再次播放歌曲 1，我必须再现任何其他歌曲，然后单击再次播放歌曲 1，这样它就可以开始播放了。我不确定如何解决这个问题。如果不这样做，我怎样才能让它发挥作用？

提前谢谢了。

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;
    });
});
4

1 回答 1

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）播放歌曲1（因为curPlaying仍然是真实的，歌曲1立即暂停）

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

于 2013-03-22T02:10:35.817 回答