Verschiedene Audio-Dateien onClick abspielen ...

[borisbaer]

Hallo zusammen.

Ich stehe vor folgendem Problem: Ich möchte gerne Audiodateien auf Knopfdruck abspielen, was an sich gut funktioniert. Aber ich weiß nicht, wie ich die src variabel machen kann, damit ich nicht jede Audiodatei, erst mal im script vorher definiert werden muss.

Hier sind zwei Texte, bei dem einen soll trss_1237_8076.ogg und bei dem anderen trss_1237_8077.ogg abgespielt werden.

<h1>q0001_ap_dlg02.dlg</h1>

<p>
Triss: Veas caer mohor'tea orya vea.
<button class="button-play" onClick="play()"><span>Abspielen</span></button>
</p>
<audio id="audio" src="data/ogg/trss_1237_8076.ogg"></audio>

<p>
Triss: Verdammt, er blockiert mich!
<button class="button-play" onClick="play()"><span>Abspielen</span></button>
</p>
<audio id="audio" src="data/ogg/trss_1237_8077.ogg"></audio>

function play(){
  var audio = document.getElementById("audio");
  audio.play();
}

Weiß jemand Rat?

[Matthias Apsel]

Hallo borisbaer,

Ich stehe vor folgendem Problem: Ich möchte gerne Audiodateien auf Knopfdruck abspielen, was an sich gut funktioniert. Aber ich weiß nicht, wie ich die src variabel machen kann, damit ich nicht jede Audiodatei, erst mal im script vorher definiert werden muss.

Aber irgendwo musst du ja dennoch festlegen, welche Audiodateien gespielt werden sollen. Zum Beispiel in data-*-Attributen. Zudem solltest du auf onclick verzichten. Stattdessen definierst du dir einen event-Handler in einem übergeordneten Element, zum Beispiel body. Der schaut nach, welches button-Element (denen übrigens noch type="button" fehlt) geklickt wurde, liest aus seinem data-src-Attribut die Quelle ein und spielt das ab.

IDs dürfen außerdem nicht mehrfach vorkommen. Für meine Variante brauchst du auch nur ein einziges audio-Element.

Bis demnächst
Matthias