在 HTML5 音频标签上使用 javascript 寻找栏处理
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3547183/
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
seek bar handling with javascript on HTML5 audio tag
提问by ptamzz
I've my codes as below
我的代码如下
<header>
<audio src="friends_and_family_03.mp3" id="audio" controls></audio>
<input type="range" step="any" id="seekbar"></input>
<script>
seekbar.value = 0;
var audio = document.getElementById("audio");
var seekbar = document.getElementById('seekbar');
function setupSeekbar() {
seekbar.min = audio.startTime;
seekbar.max = audio.startTime + audio.duration;
}
audio.ondurationchange = setupSeekbar;
function seekAudio() {
audio.currentTime = seekbar.value;
}
function updateUI() {
var lastBuffered = audio.buffered.end(audio.buffered.length-1);
seekbar.min = audio.startTime;
seekbar.max = lastBuffered;
seekbar.value = audio.currentTime;
}
seekbar.onchange = seekAudio;
audio.ontimeupdate = updateUI;
</script>
<p>
<button type="button" onclick="audio.play();">Play</button>
<button type="button" onclick="audio.pause();">Pause</button>
<button type="button" onclick="audio.currentTime = 0;"><< Rewind</button>
</p>
</header>
This is as explained in http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
这在http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ 中有解释
My problems are 1) The seekbar max value is not set according to the audio duration. (The seekbar width is just around half the audio duration). 2) The seekbar doesnt show any progress as the audio plays on but if you drag the seekbar, the currenTime actually changes.
我的问题是 1) 未根据音频持续时间设置搜索栏最大值。（搜索栏宽度大约是音频持续时间的一半）。2) 当音频播放时，搜索栏不显示任何进度，但如果您拖动搜索栏，当前时间实际上会发生变化。
Can anyone help me modify my code so that it functions properly??
谁能帮我修改我的代码以使其正常运行？
采纳答案by ptamzz
If you are caught up with the same problem, here's the solution. (I got it from another forum). Just add these two lines:
如果您遇到同样的问题，这里是解决方案。（我从另一个论坛得到的）。只需添加这两行：
audio.addEventListener('durationchange', setupSeekbar);
audio.addEventListener('timeupdate', updateUI);
Or maybe I was just a little too stupid!! lol
或者，也许我只是有点太愚蠢了！！哈哈
