我的代码如下
<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>
这与http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/中的解释相同
我的问题是
1)不根据音频持续时间设置搜索条最大值. (搜索条宽度大约是音频持续时间的一半).
2)当音频播放时,搜索栏不显示任何进度,但如果你拖动搜索条,则currenTime实际上会改变.
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。