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>

非常感谢您的帮助。

提前致谢 :)

- Stephen Cioffi

---

这个“oncanplaythrough”属性是从哪里来的？它不在任何标准中。 - Rob

Answer 1

最好的方法是使用媒体片段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 Media Fragments URI

- Brad

---

有人能告诉我为什么这个方法第二次不起作用吗？我在点击时播放音频，但第二次点击按钮时，音频会播放，但 #t=begintime,endtime 不起作用。 - Sophile

这对我有效： <audio :src="blobUrl + '#t=00:03:26'" controls ref="foo" preload="auto"

</audio>

- Titus

如果提供了“end”url参数并且有效，则Chrome上不会触发“ended”事件。 - Made in Moon

@MadeinMoon 这并不是无效的，只是在那种情况下 ended 事件不会触发（遗憾）。 - Brad

Answer 2

有几点需要注意...你的脚本需要放在音频标签后面。

此外，由于使用JavaScript处理，因此您不需要在音频标签上使用oncanplaythrough属性。

另外，oncanplaythrough是一个事件，而不是一个方法。让我们为其添加一个监听器，它将改用canplaythrough。请参考以下代码:

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

---

编辑：似乎除Firefox以外的浏览器中可能未正确实现currentTime。根据解决这个已提交的W3C bug，设置currentTime时应该触发canplay和canplaythrough事件。这意味着在我们的示例中，Firefox将无限期地播放音频轨道的前一秒左右，永远不会继续播放。我想出了这个快速解决方法，让我们改变一下。

this.currentTime = 12;

为了测试是否已经设置，从而防止canplaythrough被反复调用：

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

这种对规范的解释目前仍存在争议，但现在这个实现应该可以在支持HTML5音频的大多数现代浏览器上工作。

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

- MusikAnimal

---

我在任何标准中都没有看到canplaythrough作为任何事件。你在哪里找到的？ - Rob

oncanplaythrough 事件处理程序是最近添加的，作为2012年3月29日工作草案的一部分。 - MusikAnimal

好的，所以警告！oncanplaythrough在除了IE浏览器之外的任何浏览器中都不起作用，也没有文档记录。它只有五个月的草案状态。 - Rob

很奇怪，它缺乏任何文档，但似乎仍然可以工作。从我从一些来源（例如这个已提交的Chromium错误）中收集到的信息来看，它确实存在，但实现不当。 - MusikAnimal

我在答案的后半部分提供了一个简单的解决方案。 - MusikAnimal

Answer 3

我有一个简单的答案，适用于所有情况。

1- 创建一个按钮，当点击它时播放音频/视频。 2- 测试一下，当你点击按钮时是否能够正常播放音频，并隐藏按钮。 3- 页面加载时自动点击按钮。

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

- Ahmed Medhat

---

谢谢，但这与所提出的问题无关，问题是如何让它从特定的时间戳开始。 - Jeremy L.