Slider und Audio 4
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;
}
