Javascript HTML 5 <audio> - 在特定时间点播放文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12029509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML 5 <audio> - Play file at certain time point
提问by Stephen Cioffi
I have a simple auto playing snippet that plays the audio file however I was wondering either in JavaScript or as an attribute play that file at a certain time (ex. 3:26).
我有一个简单的自动播放片段来播放音频文件，但是我想知道是在 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>
Any help would be great. Thanks in advance :)
任何帮助都会很棒。提前致谢 ：）
采纳答案by MusikAnimal
A few things... your script will first need to be afterthe audio tag.
有几件事情...你的脚本将首先需要后的音频标签。
Also you don't need the oncanplaythoughattribute on the audio tag since you're using JavaScript to handle this.
此外，您不需要oncanplaythough音频标签上的属性，因为您使用 JavaScript 来处理这个问题。
Moreover, oncanplaythroughis an event, not a method. Let's add a listener for it, which will instead use canplaythough. Take a look at this:
而且，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>
And finally, to start the song at a specific point, simply set currentTimebefore you actually play the file. Here I have it set to 12 seconds so it will be audible in this example, for 3:26 you would use 206 (seconds).
最后，要在特定点开始播放歌曲，只需currentTime在实际播放文件之前进行设置即可。在这里，我将其设置为 12 秒，因此在此示例中可以听到，对于 3:26，您将使用 206（秒）。
Check out the live demo: http://jsfiddle.net/mNPCP/4/
查看现场演示：http: //jsfiddle.net/mNPCP/4/
EDIT: It appears that currentTimemay improperly be implemented in browsers otherthan Firefox. According to resolution of this filed W3C bug, when currentTimeis set it should then fire the canplayand canplaythroughevents. This means in our example, Firefox would play the first second or so of the audio track indefinitely, never continuing playback. I came up with this quick workaround, let's change
编辑：看来，currentTime可能无法正常在浏览器中实现其他比Firefox。根据这个提交的 W3C 错误的解决方案，当currentTime设置它时，它应该触发canplay和canplaythrough事件。这意味着在我们的示例中，Firefox 会无限期地播放音轨的第一秒左右，永远不会继续播放。我想出了这个快速的解决方法，让我们改变一下
this.currentTime = 12;
to test to see if it has already been set, and hence preventing the canplaythroughto get called repeatedly:
测试它是否已经被设置，从而防止canplaythrough被重复调用：
if(this.currentTime < 12){this.currentTime = 12;}
This interpretation of the spec is still currently being disputed, but for now this implementation should work on most modern browsers with support for HTML5 audio.
对规范的这种解释目前仍然存在争议，但目前这种实现应该适用于大多数支持 HTML5 音频的现代浏览器。
The updated jsFiddle: http://jsfiddle.net/mNPCP/5/
更新后的 jsFiddle：http: //jsfiddle.net/mNPCP/5/
回答by Brad
The best way to do this is to use the Media Fragment URI specification. Using your example, suppose you want to load the audio starting at 3:26 in.
最好的方法是使用 Media Fragment URI 规范。使用您的示例，假设您要从 3:26 开始加载音频。
<audio id="audio2"
preload="auto"
src="file.mp3#t=00:03:26"
oncanplaythrough="this.play();">
</audio>
Alternatively, we could just use the number of seconds, like file.mp3#t=206.
或者，我们可以只使用秒数，例如file.mp3#t=206.
You can also set an end time by separating the start from the end times with a comma. file.mp3#t=206,300.5
您还可以通过用逗号分隔开始时间和结束时间来设置结束时间。 file.mp3#t=206,300.5
This method is better than the JavaScript method, as you're hinting to the browser that you only want to load from a certain timestamp. Depending on the file format and server support for ranged requests, it's possible for the browser to download only the data required for playback.
此方法比 JavaScript 方法更好，因为您向浏览器暗示您只想从某个时间戳加载。根据文件格式和服务器对范围请求的支持，浏览器可能只下载播放所需的数据。
See also:
也可以看看：
