Mehrere Audioplayer (Vorbereitung) 10
Nun geht es darum mehrere Audioplayer zu erstellen. In diesem Beispiel funktioniert nur der erste Player. Es ist nur ein vorläufiges einfaches Beispiel. Im nächsten Beispiel wird alles perfektioniert.
Der Quelltext aller Player ist identisch, es gibt keine eindeutigen IDs der einzelnen Playerelemente. Lediglich ein paar Klassen sind hinzugekommen. Man kann die einzelnen Player in Javascript dann über den index des documentObjectModel ansprechen.
- Das Bild für Start und Stop bekommt die Klasse .startStopImg
- Die Positonslider .slider bekommen zusätzlich die Klasse .pos
- Die Lautstärkeslider .slider bekommen zusätzlich die Klasse .vol
HTML
In Html bekommen alle Audioelemente den gleichen Quelltext:
<div class="slidecontainer" > <img src="img/play.png" width="33" height="34" alt="play pause" class="startStopImg"/>
<input type="range" min="0" max="100" value="0" class="slider pos" >
<img src="img/soundOff.png" width="18" height="19" alt=""/>
<input type="range" min="0" max="100" value="100" class="slider vol" >
</div>
Javascript
In Javascript kann man die ersten Elemente des ersten Sliders folgendermaßen ansprechen:
var posSlider = document.getElementsByClassName("pos")[0];
var volSlider = document.getElementsByClassName("vol")[0];
var goBut = document.getElementsByClassName("startStopImg")[0];
Der Index [0] bedeutet es ist das erste Element auf der Seite. Das bedeutet natürlich, dass man auf der HTML Seite keine anderen Elemente mit gleicher Klasse davor einfügen darf, beziehungsweise müsste man das in dem Fall bei der Vergabe des Index berücksichtigen.
Desweiteren sollten alle Elemente und Variablen, die sich wiederholen in Arrays abgelegt werden. In diesem Vorab-Beispiel wird nur der Abspielbutton und die Audiodatei in Arrays abgelegt. Im nächsten Beispiel wird alles perfektioniert.
var audio = new Array();
audio[0] = new Audio('/flash/musik/ausflug.mp3');
var goBut = new Array();
goBut[0] = document.getElementsByClassName("startStopImg")[0];
Dann wird dieser Index mittels bind() an die Event Funktion angehängt. In diesem Beispiel ist die 0 in .bind(this, 0) das erste Argument für den Parameter id der aufgerufenen Funktion audioPlayPause(id). Auch weitere Parameter könnte man hinzufügen.
goBut[0].addEventListener("click", audioPlayPause.bind(this, 0));
function audioPlayPause(id) {
if (audio[id].paused) {
audio[id].play();
goBut[id].src = pausePic;
} else {
audio[id].pause();
goBut[id].src = playPic;
}
}
Die input Funktionen für volume und position wurden auch mit einem Parameter versehen, dessen Wert mittels bind() übergeben wird. Im nächsten Beispiel werden mit diesem Parameter auch die einzelnen posSlider und volSlider der einzelnen Audioplayer angesprochen.
posSlider.addEventListener("input", setPos.bind(this, 0));
function setPos(id) {
audio[id].currentTime = posSlider.value;
}
volSlider.addEventListener("input", setVol.bind(this, 0));
function setVol(id) {
audio[id].volume = volSlider.value / 100;
}
Einige weitere Funktionen wurden etwas umgeschrieben. Im nächsten Beispiel wird die Sache perfektioniert.
CSS
In der CSS Datei bekommen Positionslider und Volumeslider eine unterschiedliche Größe. Ansonsten ändert sich nichts.
siehe audioPlayer8.css
.pos{width: 200px;}
.vol{width: 100px;}
