JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<audio id=audioPlayer controls 
preload="metadata">
	<source src="http://www.html5freecode.com/files/skylander.ogg" type="audio/ogg">
	<source src="http://www.html5freecode.com/files/skylander.mp3" type="audio/mpeg">
</audio><br><br>
<input id=audioRange type="range" name="rng" min="0" step="0.25" value="0"  style="width: 248px">

JavaScript

function init() {
    var audioPlayer= document.getElementById('audioPlayer');
    var audioRange= document.getElementById('audioRange');
    audioPlayer.addEventListener('loadedmetadata', function(e){
        audioRange.max= audioPlayer.duration;
    });
    audioPlayer.addEventListener('timeupdate', function(e){
        audioRange.value=audioPlayer.currentTime;
    });
    audioRange.addEventListener("change",function(){
       audioPlayer.currentTime=audioRange.value;
    });
}

init();