创建一个只有播放和暂停的 Javascript 音频播放列表

Posted 2023-02-25

【中文标题】创建一个只有播放和暂停的 Javascript 音频播放列表

【英文标题】：Creating a Javascript audio playlist with only play and pause

【发布时间】：2016-04-20 02:24:30

【问题描述】：

我想创建一个只能播放和暂停的音频播放列表。但是，当用户听完整首歌曲后，我希望该用户能够重新播放歌曲。

目前，javascript 播放列表仅播放和停止音乐。我的暂停按钮并没有真正像暂停按钮那样工作。不知道我哪里出错了。一旦用户听完歌曲，我究竟如何才能让歌曲自动重新设置到开头？我将非常感谢这方面的帮助！我已经编写了 html 音频代码，只是在下面列出了 Java Script。

<script> // play/pause button
$(function() 
  $('#play').click(function()
    $('#pause').attr('src',"media/pause.png");
  );
);

    $(".playBtn").on('click', function() 
       var target = $(this).attr("target");
       $("#audio").attr("src",target);

       $("#audio").trigger("play");
    );

    $(".pauseBtn").on('click', function() 
       $("#audio").trigger("pause");
    );
  );
</script>

【问题讨论】：

“当用户听完整首歌曲后，我希望能够让该用户重新播放歌曲。” 预期结果为单音频循环来源？ “我的暂停按钮不像暂停按钮那样工作” 尝试在 DOM 元素上调用 pause()？

是的，只有在歌曲播放完毕后才能自动重新设置。

【参考方案1】：

音频标签有几个可以添加监听器的事件。以下是它们列表的链接：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

“结束”事件在音频播放完毕时触发，因此它可以帮助在音频到达结尾时将歌曲重置为开头。

$("#audio").on("ended", function () 
    this.currentTime = 0;
);

【参考方案2】：

您可以在<audio> 元素中使用loop 属性来连续循环单个音频源。用缓存 <audio> DOM 元素替换 jQuery 对象以在 click 事件中调用 .play()、.pause()。

javascript

$(function() 
  var audio = $("#audio")[0];

  $(".playBtn").on("click", function() 
    audio.play()
  );

  $(".pauseBtn").on("click", function() 
    audio.pause()
  );
)

html

<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio>
<button class="playBtn">Play</button>
<button class="pauseBtn">Pause</button>

jsfiddle https://jsfiddle.net/kkf33dpr/