Slider und Audio 5
Hier kommt noch ein Pause Button hinzu, mit entsprechendem Event.
var pauseBut = document.getElementById("pauseButton");
pauseBut.addEventListener("click", audioPause);
function audioPause(){
audio1.pause();
}
Außerdem gibts hier noch eine kleine Funktion, welche dafür sorgt, dass beim Schieben des Sliders die currentTime des Audios enstprechend gesetzt wird.
posSlider.addEventListener("input", setPos);
function setPos() {
audio1.currentTime = posSlider.value;
}
Ist das cool? Ich hab noch nie so eine einfache Abspielsteuerung für Sound gesehen.
HTML
<div class="slidecontainer">
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<input type="button" id="startButton" value="play">
<input type="button" name="button" id="pauseButton" value="pause">
</div>
Script
var posSlider =document.getElementById("myRange");
var audio1 = new Audio('/flash/musik/ausflug.mp3');
var startBut = document.getElementById("startButton");
var pauseBut = document.getElementById("pauseButton");
audio1.addEventListener("loadedmetadata", setSliderMax);
function setSliderMax(){
posSlider.setAttribute('max', audio1.duration);
posSlider.setAttribute('min', 0);
}
startBut.addEventListener("click", audioPlay);
function audioPlay(){
audio1.play();
audio1.addEventListener("timeupdate", setSliderVal);
}
function setSliderVal(){
posSlider.value = audio1.currentTime;
}
pauseBut.addEventListener("click", audioPause);
function audioPause(){
audio1.pause();
}
posSlider.addEventListener("input", setPos);
function setPos() {
audio1.currentTime = posSlider.value;
}
