HTML 5 <audio> - 在特定时间点播放文件

Question

我有一个简单的自动播放片段播放音频文件,但我想知道在JavaScript或作为属性播放该文件在某个时间(例如3:26).

<script type="text/javascript">
    var myAudio=document.getElementById('audio2')
    myAudio.oncanplaythrough=function(){this.play();}
</script>

<audio id="audio2" 
       preload="auto" 
       src="file.mp3" 
       oncanplaythrough="this.play();">
</audio>

任何帮助都会很棒.提前致谢 :)

Answer 1

有几件事情...你的脚本将首先需要后的音频标签.

此外,您不需要oncanplaythough音频标记上的属性,因为您使用JavaScript来处理此问题.

而且,这oncanplaythrough是一个事件,而不是一种方法.让我们为它添加一个监听器,它将改为使用canplaythough.看看这个:

<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 = 12;
    this.play();
  });
</script>

最后,要在特定点开始播放歌曲,只需currentTime在实际播放文件之前设置即可.在这里我将它设置为12秒,因此在这个例子中它将是可听见的,对于3:26你将使用206(秒).

查看现场演示:http://jsfiddle.net/mNPCP/4/

编辑:看来,currentTime可能无法正常在浏览器中实现其他比Firefox.根据这个提交的W3C错误的解决方案,当currentTime设置它应该然后触发canplay和canplaythrough事件.这意味着在我们的示例中,Firefox将无限期地播放音频轨道的第一秒左右,从不继续播放.我想出了这个快速的解决方法,让我们改变

this.currentTime = 12;

测试是否已经设置,从而阻止canplaythrough重复调用:

if(this.currentTime < 12){this.currentTime = 12;}

对规范的这种解释目前仍然存在争议,但是目前这种实现应该适用于支持HTML5音频的大多数现代浏览器.

更新的jsFiddle:http://jsfiddle.net/mNPCP/5/

Answer 2

最好的方法是使用 Media Fragment URI 规范。使用您的示例，假设您要从 3:26 开始加载音频。

<audio id="audio2" 
       preload="auto" 
       src="file.mp3#t=00:03:26" 
       oncanplaythrough="this.play();">
</audio>

或者，我们可以只使用秒数，例如file.mp3#t=206.

您还可以通过用逗号分隔开始时间和结束时间来设置结束时间。 file.mp3#t=206,300.5

此方法比 JavaScript 方法更好，因为您向浏览器暗示您只想从某个时间戳加载。根据文件格式和服务器对范围请求的支持，浏览器可能只下载播放所需的数据。

也可以看看：

• MDN 文档 - 指定播放范围
• W3C 媒体片段 URI