在 HTML5 中一次播放一首歌曲

Posted 2023-02-25

【中文标题】在 HTML5 中一次播放一首歌曲

【英文标题】：Play one song at a time in HTML5

【发布时间】：2013-03-21 19:45:14

【问题描述】：

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

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

当我播放一首歌曲时出现问题，我们将其命名为 song1，然后暂停它，然后尝试再次播放歌曲 1，歌曲 1 没有开始再现，为了再次播放歌曲 1，我必须再现任何其他歌曲然后再次单击 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;
    );
);

【参考方案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) 暂停歌曲 1（当前播放仍然设置为歌曲 1）

3) 播放歌曲 1（因为 curPlaying 仍然是真实的，歌曲 1 立即暂停）

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

【讨论】：

像魅力一样工作！谢谢！