Slider und Audio 6

Audio Player Tutorial Start

 

Der Volume Slider ist einfach. Er bekommt eine id im HTML Tag und wird in Javascript einer Variablen zugewiesen volSlider.

var volSlider = document.getElementById("myVol");

Am Ende des Scripts findet man die Funktion für die Lautstärke. Die Lautstärke volume erwartet einen Wert zwischen 0 und 1. Da der Standardumfang eines Sliders von 0 bis 100 reicht, wird dieser Wert durch 100 dividiert.

volSlider.addEventListener("input", setVol);

function setVol() {
audio1.volume = volSlider.value / 100;
}

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">
<input type="range" min="0" max="100" value="100" class="slider" id="myVol">
</div>

Script

var posSlider =document.getElementById("myRange");
var volSlider = document.getElementById("myVol");
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;
}

volSlider.addEventListener("input", setVol);

function setVol() {
audio1.volume = volSlider.value / 100;
}

nächster Schritt

Audio Start / Javascript Tipps