Webmaster: Audio mit Javascript / HTML5 abspielen

Um auf Webseiten Sounds und Audio-Dateien abzuspielen, braucht man keinen Flash-Player: Das <audio> Element aus dem HTML5 Standard kann Töne oder Lieder problemlos abspielen. Das funktioniert entweder als eigener Player mit Steuer-Buttons oder unsichtbar – oder zum Beispiel, um als Ton mit Javascript auf ein Ereignis zu reagieren und dann einen Sound abzuspielen.

Audio Player: Sound mit HTML 5 abspielen:

 
Der Code dazu:

<audio controls>
  <source src="musik.ogg" type="audio/ogg">
  <source src="musik.mp3" type="audio/mpeg">
</audio>

Hier wird die Datei einmal als OGG-Vorbis und einmal als MP3 Datei übergeben – wobei das MP3 Format mittlerweile (anders als OGG) von allen Browsern unterstützt wird und daher die bessere Wahl ist.

Audio-Player ohne Steuer-Buttons:

Ohne Steuerung würde der Player nicht mehr angezeigt:

 
<audio>
  <source src="musik.mp3" type="audio/mpeg">
</audio>

 
Ohne Steuerung, also unsichtbar – dafür mit “Autoplay” – der Player startet einen Sound direkt beim Laden der Seite:

<audio autoplay>
  <source src="musik.mp3" type="audio/mpeg">
</audio>

Sound mit Javascript abspielen:

Um mit Javascript sehr schnell einen Sound zu laden und abzuspielen, hilft dieses kurze Skript, das ohne den HTML5 Audio-Player auskommt:

<script type="text/javascript">
   var audio = new Audio('musik.mp3');
   audio.play();
</script>

Hier wird ein neues Audio-Objekt definiert und anschließend mit “audio.play()” abgespielt. Möchte man stattdessen doch die Audio-Funktionen von HTML5 nutzen, hilft das folgende kleine Script. Es erstellt einen lehren DIV-Layer, der per CSS unsichtbar ist. Klickt man auf den Link, wird in diesen DIV der nötige HTML-Code geladen, um den Ton in dem Player (unsichtbar und mit autoplay) abzuspielen.

<script type="text/javascript">
function ton() {
   var x=document.getElementById("audio");
   x.innerHTML='<audio autoplay><source src="mein-ton.mp3" type="audio/mpeg"/></audio>';
}
</script>

<a href="javascript:void(0);" onclick="ton();">Mein Link!</a>

<div id="audio" style="visibility:hidden;height:1px;width:1px;"></div>

Da bei Klick auf einen normalen Link die Seite allerdings neu geladen wird, wird der Ton auch nicht abgespielt. Dieses Beispiel eignet sich also vor allem, wenn bei einem Klick eine Javascript-Aktion ausgeführt wird, die Inhalte auf der Seite aktualisiert oder neulädt, ohne die Seite selbst neu zu laden. Alternativ kann man den Link so setzen, dass das Ziel des Links ein neues Fenster oder ein anderer Frame ist:

<a href="seite-2.html" target="haupt-frame" onclick="ton();">Mein Link!</a>