barre de recherche de manutention avec javascript sur la balise audio HTML5
J'ai mes codes ci-dessous
<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>
C'est comme expliqué dans http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/
Mes problèmes sont
1) La seekbar max valeur n'est pas définie en fonction de la durée audio. (La seekbar largeur est seulement environ la moitié de la durée audio).
2) La seekbar ne pas montrer tous les progrès que l'audio joue sur, mais si vous faites glisser la seekbar, le currenTime change réellement.
Quelqu'un peut-il m'aider à modifier mon code pour qu'il fonctionne correctement??
OriginalL'auteur ptamzz | 2010-08-23
Vous devez vous connecter pour publier un commentaire.
Si vous êtes pris avec le même problème, voici la solution. (Je l'ai eu à partir d'un autre forum). Juste ajouter ces deux lignes:
Ou peut-être que j'étais juste un peu trop stupide!! lol
OriginalL'auteur ptamzz