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!