Audio-Datei mit HTML5 einbetten
Bei der Einbettung von Audio-Dateien möchte ich künftig auf ein Plugin verzichten, denn HTML5 bringt mit dem Audio-Element die Fähigkeit mit, Audios im Broswer abspielen zu lassen, WENN es der Browser schon kann. Wer sich nicht darauf verlassen möchte, dass seine User ohne Ton bleiben, kann folgende Optionen wählen:
1) Ein Plugin: Die Einbindung von Audio-Dateien in WordPress habe ich bisher bequem und einfach mit dem Plugin Audio Player bewerkstelligt. Ab der WP-Version 3.6. klappt das Einbetten viel einfacher.
2) Audio-Datei im Backend über das Medien-Symbol hochladen. Nutzer klicken auf den Link auf der Webseite, der das im Browser hinterlegte Programm für den Dateityp (hier: MP3) anspricht. Hier kann es vorkommen, dass Nutzer erstmal überrascht sind und nicht wissen, was sie tun sollen. Vor allem, wenn sie ältere Browser verwenden oder nicht wissen, wie sie Anwendungen im Browser verwalten.
3) HTML5: Wie gesagt, noch nicht jeder Browser kann damit umgehen. Für diesen Fall gibt es ein Fallback, indem man wieder auf Flash zurückgreift und eine entsprechende Flash-Datei als Alternative anbietet. Mehr Arbeit, mehr Speicherplatz. Die meisten Browser „verstehen“ MP3 und OGG. Im Beispiel unten habe ich daher nur diese beiden Formate angeboten. Um eine MP3-Datei ins Format OGG zu konvertieren, benutze ich übrigens das Programm XMedia Recode.
Zum Reinhören: Alle drei Beispiele sind unter https://www.tendency-magazin.com/landing-page/ abrufbar. Ich habe HTML5 (im Bild der untere Player, FF) in folgenden Browsern getestet: Firefox 11.0, Opera 11.62, Internet Explorer 9. Alle drei hatten mit HTML5 keine Probleme.
Bei Web-Guru Stefan Münz, er ist wohl jedem Webworker bekannt, fand ich eine Übersicht, welcher Browser welche Dateitypen abspielen kann: eingebettete Audio-Ressorcen. Auf der Seite zeigt er den Code zum Einbinden. Für obiges Beispiel habe ich geschrieben (allerdings ohne die Leerzeichen nach der spitzen Klammer):
< audio controls >
< source src="https://www.tendency-magazin.com/audio/landingpage.mp3" type="audio/mpeg" />
< source src="/audio/landingpage.ogg" type="audio/ogg" />
Ihr Browser unterstützt kein HMTL5.
< /audio>
Wer seinen Nutzern einen schöneren Player anbieten möchte, muss auf JavaScript bzw. jQuery zurückgreifen. Die Suchmaschinen geben dazu allerhand Beispiele aus. Ich verzichte an dieser Stelle darauf.
Für Sie ...
Hi, vielen Dank für die schnelle Zusammenfassung des gesamten Themas. HTML 5 ist ja wirklich in allen Bereichen überlegen. Mich stört nur die noch nicht so gute Unterstützung in allen Browsern.
Viele liebe Grüße Tobi
@Thomas Die Unterstützung wird ja immer besser. Ohne Fallback sollte man manches auf Business-Webseiten noch nicht implementieren.
Hallo, würde gerne auf unserer Seite eine mp3 Datei einbinden und den Startpunkt festlegen, d.h. dass die Datei z.b. ab der 5 Minute startet. Gibt es hoerzu einen Parameter der dies ermöglicht?
In Sachen Medieneinbindung tut sich zwar viel. Visualisierung des Audiospektrums gibt es bei Mozilla, ansonsten lassen sich diverse Features per JavaScrip-API lösen, beispielsweise Lautstärkeregelung, Playback-Reihenfolge usw. Hier ein Beispiel für JS bei jsfiddle: http://jsfiddle.net/mNPCP/4/.
Ohne JavaScript wird das sicherlich nicht gehen.
könnte sein, was du brauchst.
Vielleicht findest du hier eine Lösung:
http://www.position-absolute.com/articles/introduction-to-the-html5-audio-tag-javascript-manipulation/.
Die simpelste und deshalb sicherste Rückfall-Lösung: Zusätzlich einen Direktlink auf die Audio-Datei anbieten. Herunterladen und lokal hören geht im Zweifel immer.
@Arnd Danke für den Hinweis! Im obigen Beispiel (Bild) sieht man die Lösung mit Link. Nur manchmal ist das Herunterlden halt nicht gewollt. Aber im Zweifel sollte man das den Nutzern zuliebe wohl anbieten, da gebe ich dir recht.
Oder den Direktlink innerhalb des audio-Tags platzieren, zusätzlich zum oder statt des Hinweises „Ihr Browser unterstützt kein HMTL5“. Ich meine, wenn man das anbietet, sollte der aufwändige Flash-Ersatz auch verzichtbar sein.