Question

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

目前，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>

Answer 1

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

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

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

Answer 2

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

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

仅播放和暂停创建Javascript音频播放列表

2 个答案: