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

Question

我有一个简单的自动播放 sn-p 来播放音频文件，但是我想知道是在 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

我有一个适用于所有人的简单答案

1- 创建一个按钮，单击该按钮会播放音频/视频
2-测试单击按钮时播放的音频是否可以隐藏按钮和
3- 页面加载时单击按钮

    window.onload =function(){
        document.getElementById("btn").click();
    }

Answer 2

最好的方法是使用媒体片段 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 Documentation - Specifying playback range
• W3C Media Fragments URI

Answer 3

一些事情...您的脚本首先需要在音频标签之后。

此外，您不需要音频标签上的 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 以外的其他 浏览器中不正确地实现。根据filed W3C bug 的分辨率，当设置currentTime 时，它应该触发canplay 和canplaythrough 事件。这意味着在我们的示例中，Firefox 将无限期地播放音轨的第一秒左右，从不继续播放。我想出了这个快速的解决方法，让我们改变

this.currentTime = 12;

测试它是否已经被设置，从而防止canplaythrough被重复调用：

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

目前对该规范的这种解释仍有争议，但目前该实现应该适用于大多数支持 HTML5 音频的现代浏览器。

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