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

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

此外，由于您使用JavaScript来处理此问题，因此您不需要音频代码上的oncanplaythough属性。

此外，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/

Answer 2

执行此操作的最佳方法是使用媒体片段URI规范。以您的示例为例，假设您想从3:26 in开始加载音频。

<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方法更好，因为您向浏览器暗示只希望从特定时间戳加载。根据文件格式和服务器对远程请求的支持，浏览器可能仅下载回放所需的数据。

另请参阅：

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

2 个答案: