Audio-Dateien könnt ihr in HTML5 ähnlich einfach wie Videos einbinden. HTML5 stellt dafür mit audio ein eigenes Element zur Verfügung.
<audio src="song.mp3"> Ihr Browser unterstützt das audio-Element nicht. </audio>
Dem audio-Element wird über das src-Attribut der Name der abzuspielenden Datei zugewiesen. Abgespielt wird die Datei dadurch allerdings noch nicht. Dazu werden Steuerungselemente benötigt.
Wollt ihr Steuerungselemente einblenden, weist ihr dem audio-Element das Attribut controls zu.
<audio src="song.mp3" controls> Ihr Browser unterstützt das audio-Element nicht. </audio>
Im Browser sollte das folgendermaßen aussehen:
Fehlt controls, ist das über audio eingebundene Element nicht zu sehen. Sinnvoll ist das Weglassen des Attributs, wenn man per JavaScript eigene Steuerungselemente einfügen will.
Auch der Einsatz des audio-Elements ist leider nicht problemlos möglich. Schuld daran sind wieder einmal die Browser, die jeweils unterschiedliche Formate unterstützen. Die folgende Tabelle liefert euch den aktuellen Stand diesbezüglich.
| Browser | MP3 | OGG | WAV | AU/SND | AIF |
Firefox | nein | ja | ja | nein | nein |
Safari | ja | nein | ja | ja | ja |
Chrome | ja | ja | nein | nein | nein |
Opera | nein | ja | ja | ja | nein |
Was also tun? Auch das audio-Element bietet euch die Möglichkeit, zusätzliche source-Elemente zu definieren. Diesen Elementen weist man dann die verschiedenen Formate für die jeweiligen Browser zu. Ein Beispiel:
<audio controls>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Den src-Attributen werden die jeweiligen Dateien, die dann in den unterschiedlichen Formaten vorliegen, zugewiesen.
Neben controls gibt es für das audio-Element weitere Attribute. Eines davon ist autoplay.
<audio controls autoplay>
<source src="song.mp3">
<source src="song.ogg">
</audio>
Wird das Attribut gesetzt, startet die Wiedergabe der Audiodatei automatisch, sobald sie geladen wurde. Dieses Attribut setzt man normalerweise nicht, da man den Besuchern die Entscheidung, wann eine Audiodatei abgespielt wird, selbst überlassen sollte.
Interessant ist darüber hinaus auch das loop-Attribut. Dieses Attribut sorgt dafür, dass die Datei in einer Schleife abgespielt wird.
Wie beim Einbinden von Videos gibt es auch für Audio-Dateien die beiden Attribute type und media. Ihr könnt also auch hier die entsprechenden MIME-Typen und Codecs angeben. Aufgeführt sind in der HTML5-Spezifikation die folgenden typischen Angaben für das type-Attribut:
• type='audio/ogg; codecs=vorbis'
• type='audio/ogg; codecs=speex'
• type='audio/ogg; codecs=flac'
Beachtet, dass die beiden Attribute ausschließlich beim source-, nicht aber beim audio-Element verwendet werden dürfen.
Flash & Co. einbinden
Flash-Filme ließen sich in früheren HTML-Versionen durch eine Kombination aus embed und object einbinden. Die daraus resultierende – übrigens sehr unschöne – Syntax sah dann beispielsweise so aus:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="800" height="600"> <param name=movie value="intro.swf"> <param name=quality value=high> <embed src="intro.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="600"> </embed> </object>
Das ist der klassische Weg über das object- und embed-Element, den es in dieser Form schon sehr lange in HTML gibt.
Allerdings bedeutet hier "klassisch" nicht, dass diese Variante in der Vergangenheit vom W3C abgesegnet gewesen ist. Denn in HTML 4 wurde das object-Element favorisiert, das so auch vom Internet Explorer korrekt interpretiert wurde. Anders der Netscape Navigator. Der setzte auf das embed-Element. Diese unterschiedliche Interpretation machte die Kombination aus object- und embed-Element nötig.
HTML5 stellt zum Einbinden von aktiven Inhalten nun ganz offiziell die beiden Elemente object und embed zur Verfügung.embed ist ein Container, der für die Anzeige von Nicht-HTML-Inhalten gedacht ist, die nicht durch andere Elemente wie img, video, audio usw. abgedeckt sind. Um die eingebundenen Inhalte wiederzugeben, werden normalerweise Browser-Plug-ins benötigt.
Mittels embed lassen sich nun zum Beispiel Flash-Filme standardkonform einbinden. Hier ein Beispiel dafür, wie so etwas aussehen kann:
<embed
src="http://www.youtube.com/v/v1PgiBpTtao?fs=1&hl=de_DE"
type="application/x-shockwave-flash"
width="384"
height="313"
allowscriptaccess="always"
allowfullscreen="true"
/>
Dem embed-Element können verschiedene Attribute zugewiesen werden. Am wichtigsten ist dabei natürlich wieder das src-Attribut. Denn darüber gibt man letztendlich die einzubindende Datei an. Über das type-Attribut wird der MIME-Typ angegeben.
Im Fall von Flash lautet dieser application/x-shockwave-flash. Wollt ihr hingegen eine LaTeX-Datei einbinden, notiert ihr application/x-latex. Breite und Höhe der eingebundenen Datei werden über width und height geregelt.
Es gibt übrigens noch weitere Attribute, die dann aber nicht offiziell zu HTML5 gehören. Sie erlauben aber die Steuerung des verwendeten Plug-ins. So wurde im vorherigen Beispiel über die beiden "Flash-Attribute" allowscriptaccess und allowfullscreen festgelegt, dass ein Skript-Zugriff und Vollbildmodus möglich ist. Ebenso gibt es aber auch das quality-Attribut, über das sich die Qualität des Flash-Films bestimmen lässt.
<embed
src="flash.swf"
width="600" height="300"
type="application/x-shockwave-flash"
quality="high"
/>Das object-Element
Das object-Element dient ähnlich wie embed als Container für Inhalte. Im Gegensatz zu embed kennt object jedoch drei verschiedene Inhaltsmodelle. Erkennt der Browser, dass es sich um eine direkt anzeigbare Grafik handelt, verhält er sich so, als ob es sich um ein img-Element handelt. Wenn es sich bei dem referenzierten Objekt um einen Webinhalt handelt, wird dieser innerhalb eines iFrames angezeigt. (Mehr zu den iFrames dann übrigens im weiteren Verlauf dieser Reihe). Bei anderen Inhalten verhält sich object wie embed.
Das folgende Beispiel zeigt die Einbindung eines Flash-Films über das object-Element.
<object
type="application/x-shockwave-flash"
data="http://www.youtube.com/v/BzYBY_9rnuA?version=3&hl=de_DE&rel=0"
width="400"
height="300">
<param name="allowscriptaccess" value="always" />
<param name="allowfullscreen" value="true" />
<p>
In Ihrem Browser ist kein Flash-Plug-in vorhanden.
</p>
</object>Stellt sich abschließend natürlich die Frage, ob man nun object oder embed einsetzen sollte. Auf den ersten Blick scheinen die beiden Elemente nahezu identisch zu sein. Und in der Tat kann das object-Element alles, was das embed-Element auch kann.
Für das Einbinden von Inhalten – außer eben Bildern – sollte normalerweise auf das object-Element zurückgegriffen werden. Dieses Element ermöglicht nämlich das Angeben alternativer Inhalte, die angezeigt werden, wenn das eingebundene Element nicht geladen werden kann.
