Slider und Audio 4

Audio Player Tutorial Start

 

Hier wird ein Button hinzugefügt, der den Sound startet.

var startBut = document.getElementById("startButton");

startBut.addEventListener("click", audioPlay);

function audioPlay(){
audio1.play();
}

Außerdem wird der Sound mit dem Event timeupdate versehen, um die Ablaufzeit currentTime der Sliderposition zuzuweisen. Der Event timeupdate wird in einer Schleife ständig wiederholt während der Sound abspielt und der Sliderknopf wandert weiter.

audio1.addEventListener("timeupdate", setSliderVal);

function setSliderVal(){
posSlider.value = audio1.currentTime;
}

HTML

<div class="slidecontainer">

<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<input type="button" id="startButton" value="play">
</div>

Script

var posSlider =document.getElementById("myRange");
var audio1 = new Audio('/flash/musik/ausflug.mp3');
var startBut = document.getElementById("startButton");


audio1.addEventListener("loadedmetadata", setSliderMax);

function setSliderMax(){
posSlider.setAttribute('max', audio1.duration);
}
startBut.addEventListener("click", audioPlay);

function audioPlay(){
audio1.play();
}


audio1.addEventListener("timeupdate", setSliderVal);


function setSliderVal(){
posSlider.value = audio1.currentTime;
}

nächster Schritt

Audio Start / Javascript Tipps