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.

Tags: ,

Nichts verpassen und neue Beiträge abonnieren

Privatsphäre garantiert! Jederzeit abbestellbar!

11 Enlightened Replies

Trackback  •  Comments RSS

  1. Tobias sagt:

    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

    • Ramona Hapke sagt:

      @Thomas Die Unterst√ľtzung wird ja immer besser. Ohne Fallback sollte man manches auf Business-Webseiten noch nicht implementieren.

  2. Marcus sagt:

    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?

  3. Arnd sagt:

    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.

  4. Ramona Hapke sagt:

    @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.

  5. Arnd sagt:

    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.

einen Kommentar schreiben

Bitte Einloggen , um einen Kommentar zu hinterlassen

Top