Javascript <audio> 和 <progress> HTML5 元素的自定义进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12314345/
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
Custom progress bar for <audio> and <progress> HTML5 elements
提问by Zach Boyd McTague
I am mind boggled at working out how to create a custom seekbar for an audio player using the tag and simple Javascript.
我很困惑如何使用标签和简单的 Javascript 为音频播放器创建自定义搜索栏。
Current Code:
当前代码：
<script>
function play() {
document.getElementById('player').play();
}
function pause() {
document.getElementById('player').pause();
}
</script>
<audio src="sample.mp3" id="player"></audio>
<button onClick="javascript:play()" >Play</button>
<button onClick="javascript:pause()" >Pause</button>
<progress id="seekbar"></progress>
Would it be possible to link the progress bar so that when i play a song the progress is shown?
是否可以链接进度条，以便在播放歌曲时显示进度？
回答by jbalsas
Yes, it is possible using the timeupdateevent of the audio tag. You receive this event every time the position of the playback is updated. Then, you can update your progress bar using the currentTimeand durationproperties of the audio element.
是的，可以使用音频标签的timeupdate事件。每次更新播放位置时，您都会收到此事件。然后，您可以使用音频元素的currentTime和duration属性更新进度条。
You can see a working example in this fiddle
你可以在这个小提琴中看到一个工作示例
回答by Vladislav Filonov
If you want smooth progress bar,try somethink like that
如果你想要平滑的进度条，试试这样的想法
HTML:
HTML：
<div class="hp_slide">
<div class="hp_range"></div>
</div>
CSS:
CSS：
.hp_slide{
width:100%;
background:white;
height:25px;
}
.hp_range{
width:0;
background:black;
height:25px;
}
JS:
JS：
var player = document.getElementById('player');
player.addEventListener("timeupdate", function() {
var currentTime = player.currentTime;
var duration = player.duration;
$('.hp_range').stop(true,true).animate({'width':(currentTime +.25)/duration*100+'%'},250,'linear');
});
Pretty rough,but works
相当粗糙，但有效
回答by Calvein
First of all, don't use the progresselement, it's a shitty element (for now) and styling it is a huge pain in... well it's boring (look at a little project I made, look at it(and it's juste webkit/moz)).
首先，不要使用该progress元素，它是一个糟糕的元素（目前）并且样式化它是一个巨大的痛苦......好吧它很无聊（看看我做的一个小项目，看看它（它是 juste webkit /moz))。
Anyway, you should read the doc on MDN, it's very easy and with a lot of examples. What you are looking for is the currentTimeattribute, here a little snippet :
无论如何，您应该阅读MDN上的文档，它非常简单并且有很多示例。您正在寻找的是currentTime属性，这里有一个小片段：
var audio = document.querySelector('#player')
audio.currentTime = 60 // will go to the 60th second
So what you need is to use the cross-multiplication (divis the element you use as a progress bar) :
Where I clicked on div| THE TIME I WANT TO KNOW
————————————————————————————————————————
Total length of div| The total time of my video/audio (audio.seekable.end())
所以你需要的是使用交叉乘法（div是你用作进度条的元素）：我点击的地方div| 我想知道的时间
——————————————————————————————————————————
总长度div| 我的视频/音频的总时间 ( audio.seekable.end())
