Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

Die Einbindung von <audio> im Browser

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Das HTML5-Element audio ermöglicht es dem Browser, Sounddateien auch ohne spezielles Plug-in abzuspielen.

Transkript

In diesem Film möchte ich Ihnen zeigen, wie man einen Song mit dem HTML5 Element "Audio" im Browser einbindet, so dass der Browser den Song abspielen kann, ohne ein zusätzliches Plugin zu gebrauchen. Dazu sind im Ordner eine Datei "html5audio.html" und zwei Songs, namens "TheDruids.mp3" und derselbe Song nochmal im Format ".ogg". Konvertierer von mp3 in ogg finden Sie im Web jede Menge, einfach mal googeln nach "Converter von mp3 zu ogg" oder umgekehrt. Oder auch von "Wave", da gibt es jede Menge Programme. Man muss bloß beim Installieren aufpassen, dass man nur dieses Programm installiert, und nicht noch eventuell zusätzliche (in Anführungszeichen) "Bonus-Software". Dann geht es rüber in den Editor, um den Audio-Song einzubinden. Das HTML-Element heißt "Audio", schlicht und einfach, und etwas weiter unten soll das hier wieder geschlossen werden. Dieses Audio hat nun ein paar Attribute. Zuallererst gibt man ihm meistens eine ID, ich nenne es einfach mal "Song", der ist relativ beliebig. Dann soll der Player "Steuerelemente" haben, die lade ich einfach mit dem Wort "Controls". Und man kann noch entscheiden, was geladen werden soll, dazu gibt es das Attribut "Preload". Da gibt es dann "None", da wird gar nichts geladen, bevor der Benutzer auf den Play-Button klickt. Dann gibt es "Auto", dann entscheiden die Browser - die meisten laden den gesamten Song - oder es gibt "Metadata", dann werden z.B. Metadaten wie die Songlänge und dergleichen heruntergeladen, die Song-Datei selbst aber nicht. Zwischen "Audio" und "/Audio" gibt es eine Angabe von "Source". Und das ist ein leeres Element, aber es hat hier natürlich eine Dateiangabe, "TheDruids.mp3". Dann geben wir noch den "MimeType" mit an, damit der Browser weiß, was da kommt, und sich seelisch schon mal darauf einstellen kann: Audio Mp3. Denn sonst glaubt er: Alles Html, was da so kommt. Das würde in einer perfekten Welt eigentlich schon fast ausreichen, aber es gibt Browser, die Mp3 nicht können. Also gehe ich eine Zeile tiefer hier, ich lasse ein bisschen Platz dazwischen, und wir geben den zweiten auch gleich an, und das ist dann "TheDruids.ogg", mit dem "MimeType" "Audio Ogg". D.h., Browser, die den ersten kennen, Mp3, nehmen den. Browser, die den nicht kennen, wie Firefox z.B., laufen einen weiter und nehmen diesen, und alle anderen Browser, die sollen ja nicht unversorgt bleiben, die kriegen hier einen Download angeboten. "TheDruids.mp3", weil das am weitesten verbreitet ist, "mp3-Datei herunterladen". Herunterladen und den Link wieder schließen. Damit sind alle versorgt. Es gibt Audio, /Audio mit einer ID, mit Controls, damit abgespielt werden kann, und die Metadaten werden heruntergeladen. Dann gibt es mp3, dann gibt es die ogg-Version - die Dateien müssen natürlich auch im Ordner liegen. Und falls ein älterer Browser kommt, dann kann der Benutzer den Song einfach herunterladen und ihn dann mit einem beliebigen Programm selber abspielen. Gespeichert ist es, es geht rüber in den Browser, "Neu laden", und hier ist das Abspielprogrämmchen, ich drücke mal auf "Start" und da fängt die Musik an zu spielen - das soll reichen. In jedem Browser sieht das natürlich ein bisschen anders aus. Ich habe hier nochmal die Einbindung vorbereitet: Also in der Übersicht "Mehrere Dateien", eine Datei mit mehreren Elementen, so ist es hier richtig geladen. Und um die Player einmal in der Übersicht zu sehen... Da sehen Sie hier, dass das Audioelement in verschiedenen Browsern doch durchaus verschiedene Varianten, auch verschiedene Größen, hervorruft. Da hat man sich noch nicht so ganz geeinigt. Lassen Sie einfach im Layout ein bisschen Platz für den Player, die Browser machen dann schon was draus.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!