Question

我有这个代码，但我不知道如何让歌曲从 0:19 秒开始。你能帮我吗？

<div class="fin-subheading">
  &middot; ROLEPLAY &middot;
  <audio id='music' volume='0.5' autoplay controls>
    <source src="anonymous.mp3" type="audio/mpeg">
  </audio>
</div>

<script>
  var audio = document.getElementById("music");
  audio.volume = 0.3;
</script>

Answer 1

您可以使用 currentTime 属性

window.onload = function() {
    const audio = document.getElementById("music");
    audio.volume = 0.3;
    audio.currentTime = 19;
    audio.play();
}

Answer 2

您可以在 src 属性本身中指定播放范围。请参阅文档 here：

<块引用>

当为一个或元素指定媒体的URI时，您可以选择包含其他信息来指定要播放的媒体部分。为此，请附加一个井号（“#”）后跟媒体片段描述。

使用以下语法指定时间范围：

#t=[开始时间][,结束时间]

所以代替：

<source src="anonymous.mp3" type="audio/mpeg">

简单地说：

<source src="anonymous.mp3#t=n,m" type="audio/mpeg">

其中 n 和 m 分别是开始和结束时间。

范围也可以是无界的。例如，您可以这样做：

<source src="anonymous.mp3#t=19" type="audio/mpeg">

从 19 秒开始，一直播放到最后；甚至这个：

<source src="anonymous.mp3#t=,19" type="audio/mpeg">

将从头开始到 19 秒。

Answer 3

您需要使用 canplaythrough 事件并在该 currentTime 内使用，然后在到达该时间时使用 play。

确保您没有在 HTML 的音频标签中autoplay。

<audio id="audio2" 
       preload="auto" 
       src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >
    <p>Your browser does not support the audio element</p>
</audio>

<script>
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {
      this.currentTime = 19;
      this.play();
    });
</script>

HTML 自动播放歌曲和 StartAt

3 个答案: