Musik im Browser

Permalink

Seit dem HTML5 an Verbreitung gewonnen hat ist es auch möglich Audio- und Videoinhalte einfach im Browser zu präsentieren. Dazu spezifiziert HTML5 zwei neues Tags: <audio> und <video>. Auf ähnliche Weiße wie man Bilder in Webseiten positioniert kann man damit Töne oder Musik in eine Webseite integrieren.

<audio 
   title="Zombie Dreams" 
   controls="controls"
   autoplay="autoplay"
   loop="loop"
   preload="auto">
</audio>

Dieses Beispiel zeigt welche Einflussmöglichkeiten man auf eine Musikquelle hat. Der Titel wird wie üblich von den Browsern als Tooltip angezeigt. controls, autoplay und loop sind boolesche Attribute, sie sind entweder da oder nicht.

Die Browser bieten einige wenige Funktionen an mit denen der Benutzer die Musik starten und stoppen kann und die Position innerhalb eines Stücks beeinflussen kann. Das Attribut controls sorgt dafür das hierzu entsprechende Buttons und Slider angezeigt werden. Wenn das Attribut fehlt ist das Tag unsichtbar und kann so für Hintergrundmusik genutzt werden. Ein unsichtbares Audio-Tag ist auch hilfreich wenn man in seiner Webapplikation akustisches Feedback einsetzen möchte.

Manchmal möchte man ein Stück automatisch Starten wenn die Webseite aufgerufen wird. In einem solchen Fall kann man das Attribut autoplay benutzen.

Mittels loop kann man ein Stück endlos wiederholen.

Im Fall von preload handelt es sich um ein Attribut das steuert wie und wann die Daten durch den Browser geladen werden sollen. Das ist hilfreich wenn man die Performance einer Webseite optimieren will. Mit dem Wert none wird die Audiodatei erst aus dem Internet geladen wenn sie abgespielt wird. Dadurch wird der Seitenaufbau nicht unnötig verlangsamt. Der Wert auto überlässt die Wahl dieses Zeitpunkts dem Browser. Eine Art Mittelweg beschreitet der Attributwert metadata. Hierdurch soll der Browser nur einige Daten, z.B. die Spieldauer, abfragen und erst bei bedarf die restlichen Daten hohlen.

Quellen

Was bisher fehlt ist die eigentliche Quellangabe. Diese könnte man über das Attribut src angeben. Ich empfehle aber einen anderen Weg: Mittels des Tags <source> ist es möglich alternative Quellen, Fassungen und Dateitypen anzubieten statt einer starren Datei. Dieses Vorgehen ist auch nötig um möglichst viele Browser zu berücksichtigen – leider können sich die einschlägigen Anbieter nämlich nicht auf ein einzelnes, von allen unterstütztes Audioformat einigen.

Durch Angabe von mehreren Quellen in unterschiedlichen Formaten, zum Beispiel MP3 und Ogg Vorbis, lässt sich so eine breite Unterstützung erreichen. Dabei unterstützen, wohl aus Lizenzgründen, Opera und Mozilla das Format MP3 nicht. Der Internet Explorer sowie Safari können wiederum mit Ogg Vorbis nichts anfangen solange man nicht extra Software installiert.

Eine Aufstellung welche Formate zu welchem Browser passen gibt es zum Beispiel im Developer Network bei Mozilla.

Ein Beispiel anhand des Songs Zombie Dreams (unter einer CC-Lizenz veröffentlicht) würde das ganze damit so aussehen:

<audio title="Zombie Dreams" controls="controls"
         autoplay="autoplay" loop="loop" preload="auto">
   <source src="http://ia700800.us.archive.org/26/items/AaahhRecordsDenmaaahhrkCompilation/08ZombieDreams.ogg" type="audio/ogg"/>
   <source src="http://ia700800.us.archive.org/26/items/AaahhRecordsDenmaaahhrkCompilation/08ZombieDreams.mp3" type="audio/mpeg"/>
</audio>

Bei Videos kann man auch noch verschiedene Quellen für unterschiedliche Bildschirmauflösung und Seitenverhältnis angeben indem man im Attribut media eine aus CSS3 bekannte Media Query angibt. Grundsätzlich geht das auch für Audioquellen, macht hier aber meiner Meinung nach wenig Sinn.

<source src="video.ogg type="video/ogg" 
       media="screen and (max-device-width: 480px)" />

Diese Zeile gibt eine Quelle an die nur von Monitoren mit einer horizontalen Auflösung von höchstens 480 Pixeln genutzt werden soll.

Fallback

Wer ältere Browser unterstützen will kann HTML 5 trotzdem benutzen. Ein Browser der <audio> oder <video> nicht kennt stellt darin enthaltenes HTML-Markup trotzdem da. Das Heißt wenn man innerhalb des Audio-Tags weiteres Markup, zum Beispiel einen Download-Link oder einen Flashplayer, unterbringt wird dieser dargestellt. Aktuellere Browser, die die neuen Tags verstehen, ignorieren deren Inhalt und lassen sich somit nicht beirren.

Internet Explorer Probleme

Leider gibt es im Internet Explorer 9 ein Problem im Zusammenhang mit dem Attribut preload von <audio> (nicht <video>). Wenn der Wert dieses Attributs auf none steht wird zwar Platz für die Controls vorgesehen aber diese nicht angezeigt. Als Effekt hiervon kann ein Besucher der Seite das Stück nicht starten – er weiß ja nicht einmal das es da ist. Ein paar Zeilen Javascript können hier aber Abhilfe schaffen:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
 if($.browser.msie)
 {
   $('audio').attr('preload', 'auto');
   $('audio')[0].pause();
 }
});
</script>

Hier wird, der Einfachheit halber mit jQuery, der Wert des Preload-Attributes geändert und danach das Musikstück pausiert. Das führt dazu das der Internet Explorer anfängt die Datei zu laden und damit auch die Controls anzeigt.

Wer das beschriebene Verhalten mit eigenen Augen beobachten will… Ich habe auf jsFiddle ein kleines Beispiel eingestellt. Eine Fassung davon enthält das oben beschriebene Javascript. Eine zweite Fassung muss ohne auskommen. Natürlich muss man die Links im Internet Explorer öffnen um den Unterschied zu bemerken.