08.102012

Sounds mit Javascript abspielen

Viele Webseiten gleichen kleinen Desktop-Anwendungen. Mit diversen Open-Source verfügbaren HTML- und Javascript Frameworks ist dies auch kein Problem. Vor einer kleinen Herausforderung steht man, aber sobald man Sounds per Javascript abspielen möchte. In diesem Post möchte ich einen Weg per Javascript Sounds abzuspielen zeigen.Das HTML5-Element Audio kann man für diesen Zweck ideal nutzen. Ein kleiner Nachteil, es gibt keinen Audiostandard, der von allen Browsern unterstützt wird. Deswegen ist es notwendig die Audio-Daten in mehreren Formaten (MP3, OGG und WAV) zu integrieren.

<audio id="audiofile" preload="auto">
<source src="/sounds/new_message.mp3" />
<source src="/sounds/new_message.ogg" />
<source src="/sounds/new_message.wav" />
</audio>

Nun haben wir ein Objekt erzeugt, das man mit Javascript steuern kann.

// Abspielen
document.getElementById('audiofile').play();
// Pause
document.getElementById('audiofile').pause();
// Lautstärke  (0 bis 100)
document.getElementById('audiofile').volume=50;

Zu beachten ist, dass dies eine reine HTML5 Lösung ist. Ältere Browser unterstützen diese Lösung daher natürlich ist. Hier ist es sinnvoll zu überlegen ob man für die älteren Browser eine alternative Flash-Lösung integriert.