Html5 Audio und Surround Sound

Montag, 14. Mai, 2012

Wie man stereo-Audiodateien in eine Webseite einbindet und möglichst viele Webbrowser dies abspielen lässt, ist in etlichen Seiten/ Blogs beschrieben.
Alle bekannten, neueren Webbrowser unterstützen zumindest das Format MP3 oder aber OGG.

<audio 
  loop="loop" 
  controls="controls"
  >
  <source src="demosong_2.0_.ogg" type="audio/ogg" />
  <source src="demosong_2.0_.mp3" type="audio/mp3" />

  <!-- Flash-Fallback kommt hierher -->

</audio>

Und wer noch Wert auf Abwärtskompatibiltät legt (IE 8 und älter), der setzt noch einen Flashplayer ein und lässt die MP3 Datei abspielen.

Soweit so gut.

Und wie sieht es mit surround-Audiodateien aus? Schliesslich wird seit 1 Jahrzehnt jeder Billigst-PC mit einer 5.1 Soundkarte (oder besser) ausgeliefert…

Meine ersten Experimente habe ich bereits im Oster-Demo gemacht (s. Link [01] unten am Ende des Beitrags). Nachfolgend gibt es nun nachträglich etwas ausführlichere Informationen.

Bekannte Audioformate mit surround-Unterstützung sind

  • AAC (Mpeg-4-Audio)
  • AC3 (Dolby)
  • OGG (Ogg Vorbis)
  • WAV (unkomprimierte Audio-Daten)

Das letztgenannte Format WAV ist für das Medium Internet ungeeignet, da die Daten nicht komprimiert sind. Bei 5 min Musik ist man schnell bei 200 MB pro Song. Auch wenn die Internetverbindungen immer breitbandiger werden, ist dies etwas arg viel - es geht schliesslich auch Faktor 10 kleiner.

Zum Testen der Browser-Kompatibiltät hab ich 2 Songs jeweils stereo und surround konvertiert und jede Datei in je einem Audiotag abgelegt. Damit kann man prüfen, welcher Webbrowser mit welchem Audioformat zurechtkommt (s. Link [02] unten am Ende des Beitrags).

Noch ein Wort zu den MIME Types… Um Audio-Tags richtig testen zu können, sollte beim Download der Audiodateien vom Webserver der richtige Datentyp im Http-Header deklariert werden. Für den Apache-Webserver kann man , z.B. in der .htaccess seines Hosters setzen

AddType audio/ac3 .ac3
AddType audio/mp4 .m4a
AddType audio/mpeg .mp3
AddType audio/ogg .ogg

Durch Probieren kommt man zu folgender Kompatibiltätsliste:

2012-05-browsersupport-surround.png

Firefox (zumindest bis einschl. Version 12 13) und Opera (bis Version 11 12) zeigen Schwächen.
[1] Firefox sollte den seit “Ewigkeiten” mitgeschleppten Bug im Ogg-Decoder fixen: Die Surround-Ogg-Datei wird abgespielt, aber es kommt keinerlei Ton.
[2] Und warum im Opera ein Downmixing von surround nach stereo erfolgt, bleibt wohl ein Geheimnis der Entwickler.

Fazit 1:
AC3 wird von keinem Webbrowser unterstützt. Sofern man dieses Format als 5.1 Audio auf seiner Webseite anbieten wollte, dann rein als Download. Soll eine Wiedergabe auf der Webseite erfolgen, so braucht man sich nicht die Mühe machen, in dieses Format zu konvertieren.

Fazit 2:
Die Wiedergabe von 5.1 Audiodateien ist mit IE und Webkit-Browsern möglich - es sind die Formate AAC und OGG anzubieten.
Optimalerweise sollte man pro Song 2 Audiotags anbieten: eines für die Stereo-Variante (s. Codeschnipsel oben) und diesen für die surround-Versionen:

<audio 
  loop="loop" 
  controls="controls"
  >
  <source src="demosong_5.1_.m4a" type="audio/mp4" />
  <source src="demosong_5.1_.ogg" type="audio/ogg" />
</audio>

(samt einem netten Hinweis für Firefox- und Opera-User)

Last but not least:
Ich habe einen Player mit Javascript programmiert, der einen Song, der in stereo als auch surround vorliegt, abspielen kann und zwischen stereo und surround umschalten kann. In der Linkliste findet ihr unter [03] meinen AMC Player.

Weiterführende Links:

  1. Oster-Demo mit Switching zw. Audiotags mit Stereo- und surround-Sound
  2. Testseite für unterstützte Audioformate
  3. AMC Player - Html 5 Player für stereo und surround Medien
  4. w3schools.com: audio tag, Html5 audio

Updates:

  • 2012-06-19: Test mit Firefox 13 und Opera 12 - auch die neuen Versionen zeigen das im Test beschriebene Verhalten
  • 2013-07-30: erneuter Test mit Firefox 22 und Opera 15 - nun geht es ;-)