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

Creating a Javascript audio playlist with only play and pause

本文关键字：暂停 Javascript 播放列表 音频 播放 一个 创建      更新时间：2023-09-26

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

目前，Javascript播放列表只播放和停止音乐。我的暂停按钮并不像暂停按钮那样工作。不确定我哪里错了。一旦用户听完歌曲，我该如何让歌曲自动重新设置为开头？我将非常感谢在这方面的帮助！我已经编写了HTML音频代码，并在下面列出了Java脚本。

<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>

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

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

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

您可以在<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>

jsfiddlehttps://jsfiddle.net/kkf33dpr/

相关文章：