Bonjour, je li actuellement le cours de javascript de ce site et je voudrais créer ( pour m'entraîner ) une barre de défilement cliquable.
Voici mon code (presque pareil que sur le cours mais il ne fonctionne pas! ) :
EDIT: code modifié => barre de volume :
<style>
<style>
#first {
border: 1px solid black;
}
#last {
background-color: red;
}
.volume a {
display: inline-block;
background-color: grey;
width: 4px;
vertical-align: bottom;
margin-left: 1px;
margin-right: 1px;
}
.stick1 { height: 5px; }
.stick2 { height: 10px; }
.stick3 { height: 15px; }
.stick4 { height: 20px; }
.stick5 { height: 25px; }
</style>
<audio id="audioPlayer" ontimeupdate="update(this);">
<source src="miz.mp3"></source>
</audio>
<article>
<div id="first">
<div id="last" onclick="clickProgress('audioPlayer', this, event);">Pas de lecture</div>
</div>
<span id="time">00:00/00:00</span>
<button class="control" onclick="play('audioPlayer', this);">Play</button>
<button class="control" onclick="stop('audioPlayer', this)">stop</button>
<img src="son.jpg" />
<input id="test" value="1" type="range" min="0" max="1" step="0.1" style="width: 50px;" onchange="volume('audioPlayer', this.value)" />
</article>
<script>
function play(idPlayer, control) {
var player = document.querySelector('#' + idPlayer);
if (player.paused) {
player.play();
control.textContent = 'Pause';
} else {
player.pause();
control.textContent = 'Play';
}
}
function stop(idPlayer) {
var player = document.querySelector('#' + idPlayer);
player.currentTime = 0;
player.pause();
}
function update(player) {
var duration = player.duration; // Durée totale
var time = player.currentTime; // Temps écoulé
var fraction = time / duration;
var percent = Math.ceil(fraction * 100);
var progress = document.querySelector('#last');
progress.style.width = percent + '%';
progress.textContent = percent + '%';
document.querySelector('#time').textContent = formatTime(time) + ' / ' + formatTime(duration);
}
function formatTime(time) {
var hours = Math.floor(time / 3600);
var mins = Math.floor((time % 3600) / 60);
var secs = Math.floor(time % 60);
if (secs < 10) {
secs = "0" + secs;
}
if (hours) {
if (mins < 10) {
mins = "0" + mins;
}
return hours + ":" + mins + ":" + secs; // hh:mm:ss
} else {
return mins + ":" + secs; // mm:ss
}
}
function volume(idPlayer, vol) {
var player = document.querySelector('#' + idPlayer);
player.volume = vol;
}
function clickProgress(idPlayer, control, event) {
var parent = getPosition(control); // La position absolue de la progressBar
var target = getMousePosition(event); // L'endroit du la progressBar où on a cliqué
var player = document.querySelector('#' + idPlayer);
var x = target.x - parent.x;
var y = target.y - parent.y;
var wrapperWidth = document.querySelector('#last').offsetWidth;
var percent = Math.ceil((x / wrapperWidth) * 100);
var duration = player.duration;
player.currentTime = (duration * percent) / 100;
}
function getMousePosition(event) {
return {
x: event.pageX,
y: event.pageY
}
}
function getPosition(element){
var top = 0, left = 0;
while (element) {
left += element.offsetLeft;
top += element.offsetTop;
element = element.offsetParent;
}
return { x: left, y: top };
}
</script>
Je tiens à préciser que je m'en fiche de la compatibilité sur IE
Merci d'avance!
var fWidth = (elapsedTime / mediaPlayer.duration) * (canvas.clientWidth);
if (fWidth > 0) {
ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
}
}
}
</script>
</body>
</html>
[javascript] <audio> => créer une barre cliquable
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.