Audioplayer aufhypschen 7
Anstatt der beiden Buttons play und pause gibt es jetzt ein Bild für beide Aktionen. Außerdem 2 Variablen für die Bildadressen des play-Bildes und pause-Bildes. Die id des Bildes lautet goButton.
In der Aktion wird zwischen Pause und Play umgeschaltet, und die Bildadresse ausgetauscht. paused liefert den boolschen Wert true, wenn der Sound nicht abgespielt wird.
var goBut = document.getElementById("goButton");
var playPic ="img/play.png"
var pausePic ="img/pause.png"
goBut.addEventListener("click", audioPlayPause);
function audioPlayPause(){
if (audio1.paused) {
audio1.play();
goBut.src = pausePic;
} else {
audio1.pause();
goBut.src = playPic;
}
}
Außerdem wird überprüft ob der Sound am Ende angekommen ist. Dazu dient die Audio Eigenschaft ended, die einen boolschen Wert liefert. Ist das der Fall, wird der Sound gestoppt, die audio1.currentTime und die Sliderposition wird auf 0 gesetzt und das goBut Bild ausgetauscht.
audio1.addEventListener("timeupdate", setSliderVal);
function setSliderVal() {
posSlider.value = audio1.currentTime;
if (audio1.ended) {
posSlider.value = 0;
audio1.currentTime = 0;
goBut.src = playPic;
audio1.pause();
}
}
CSS
Das Ganze wird dann mit CSS gestaltet und positioniert. Siehe CSS Datei
Script
Siehe Script Datei audioPlayer7.js
HTML
<div class="slidecontainer"> <img src="img/play.png" width="33" height="34" alt="play pause" id="goButton"/>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<img src="img/soundOff.png" width="18" height="19" alt=""/>
<input type="range" min="0" max="100" value="100" class="slider" id="myVol">
</div>
