Доброго времени суток!Во время изучения HML5 audio, возникли вопросы.
Есть код:
<!DOCTYPE>
<html>
<head>
<title>HTML5 audio player</title>
</head>
<style type="text/css">
#player{
position:absolute;
border-radius:6px;
background-color:#000;
opacity:0.8;
height:30px;
padding:10px;
}
#switcher{
position:relative;
display:inline-block;
}
#progress{
position:relative;
display:inline-block;
border:1px solid #fff;
height:10px;
top:0px;
width:100px;
}
#loading{
position:relative;
background-color:#fff;
height:10px;
width:0px;
}
#buffered{
position:relative;
background-color:#fff;
height:10px;
opacity:0.5;
top:-10px;
}
</style>
<body>
<div id="player">
<button id="switcher">Play</button>
<div id="progress">
<div id="loading"></div>
<div id="buffered"></div>
</div>
</div>
<audio id="audio">
<source src="audio.mp3" type="audio/mp3"/>
</audio>
<script type="text/javascript">
var audio = document.getElementById("audio"),
switcher = document.getElementById("switcher"),
progress = document.getElementById("progress"),
duration = document.getElementById("duration"),
loading = document.getElementById("loading"),
buffered = document.getElementById("buffered");
switcher.addEventListener("click", function(){
if(switcher.innerHTML == "Play"){
audio.play();
switcher.innerHTML = "Pause";
}
else{
audio.pause();
switcher.innerHTML = "Play";
}
},false);
switcher.addEventListener("ended",function(){
audio.pause();
switcher.innerHTML = "Play";
},false);
switcher.addEventListener("play",function(){
switcher.innerHTML = "Pause";
},false);
switcher.addEventListener("pause",function(){
switcher.innerHTML = "Play";
},false);
progress.style.width = 100;
audio.addEventListener("timeupdate",function(){
loading.style.width = (audio.currentTime / audio.duration)*parseInt(progress.style.width);
},false);
audio.addEventListener("progress",function(){
buffered.style.width = (audio.seekable.end(0) / audio.duration)*parseInt(progress.style.width);
},false);
progress.addEventListener("click",function(event){
audio.currentTime = Math.round(((event.pageX - this.offsetLeft)/parseInt(this.style.width))*audio.duration);
},false);
</script>
</body>
</html>
Вопросы:
1.При клике на определённую область элемента с id="progress":
progress.addEventListener("click",function(event){
audio.currentTime = Math.round(((event.pageX - this.offsetLeft)/parseInt(this.style.width))*audio.duration);
},false);
Должно меняться текущее время мелодии, а следовательно, должна меняться длина элемента loading:
audio.addEventListener("timeupdate",function(){
loading.style.width = (audio.currentTime / audio.duration)*parseInt(progress.style.width);
},false);
Но вся проблема в том, что она сдвигается немного дальше курсора (когда потестите - увидите), и не получается попасть в некоторые моменты мелодии сразу.
2.Второй вопрос, на мой взгляд, ещё интереснее - в браузере Chrome при проигрывании вот этой мелодии:
http://myzuka.ru/Song/3140254/Cold-War-Kids-Tuxedos
Если изменить текущее время песни, то когда ползунок дойдёт до конца прогрессбара, песня ещё будет проигрываться.Если текущее время не менять, то всё будет как надо.
Заранее спасибо.
