大佬教程收集整理的这篇文章主要介绍了在HTML5音频标签上使用javascript搜索栏处理,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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实际上会改变.
以上是大佬教程为你收集整理的在HTML5音频标签上使用javascript搜索栏处理全部内容,希望文章能够帮你解决在HTML5音频标签上使用javascript搜索栏处理所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。