Kurzanleitung zur Implementierung des HTML5-Audio-Tags

Ernest Delgado
Ernest Delgado
X

Schritt 1: Flash-Objekt in das Audio-Tag umschließen

Browser, die das Audio-Tag nicht erkennen, laden stattdessen den Flash-Inhalt.

<audio>
</span><span class="old">
    <object class="playerpreview" type="application/x-shockwave-flash"
            data="player_mp3_mini.swf" width="200" height="20">
      <param name="movie" value="player_mp3_mini.swf" />
      <param name="bgcolor" value="#085c68" />
      <param name="FlashVars" value="mp3=test.mp3" />
      <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
             height="20" name="movie" align=""
             type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
      </embed>
    </object>
</span><span class="new">
</audio>

Schritt 2: Quellverweis hinzufügen

Wir können beliebig viele Quellzeilen und -formate hinzufügen. Wenn der Browser ein bestimmtes Format nicht unterstützt, greift er auf das nächste zurück und so weiter.

<span class="old"><audio></span>
  <span class="new"><source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" /></span><span class="old">

  <object class="playerpreview" type="application/x-shockwave-flash"
          data="player_mp3_mini.swf" width="200" height="20">
    <param name="movie" value="player_mp3_mini.swf" />
    <param name="bgcolor" value="#085c68" />
    <param name="FlashVars" value="mp3=test.mp3" />
    <embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
           height="20" name="movie" align=""
           type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
    </embed>
  </object>

</audio></span>

Schritt 3: Fallback zu Flash hinzufügen

Aus Sicherheitsgründen müssen wir das Fallback zu einem Flash-Audioplayer hinzufügen, falls der Browser keines der von uns angegebenen Formate unterstützt. Firefox 3.5 unterstützt beispielsweise nur das Audio-Tag im Ogg-Format, möglicherweise steht uns aber nur die MP3-Datei zur Verfügung.

<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">

<object class="playerpreview" type="application/x-shockwave-flash"
        data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
        height="20" name="movie" align=""
        type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>

</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
    swfobject.embedSWF(
    "player_mp3_mini.swf",
    "player_fallback",
    "200",
    "20",
    "9.0.0",
    "",
    {"mp3":"test.mp3"},
    {"bgcolor":"#085c68"});
}
}
</script></span>

Wir verwenden die SWFObject-Bibliothek, um den Flash Player über JavaScript einzufügen. Um die Bibliothek einzubinden, können Sie einfach das Google AJAX Libraries API verwenden, indem Sie diese beiden Zeilen in Ihren Header einfügen:

<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>

Schritt 4: Standardsteuerelemente hinzufügen, damit der Player angezeigt wird

Diese Steuerelemente sind nicht anpassbar (siehe Beispiele am Ende). Da diese Standardsteuerelemente unabhängig vom unterstützten Format angezeigt werden, müssen wir für die Sichtbarkeit die zuvor erstellte Bedingung verwenden.

// TODO: DevSite - Code sample removed as it used inline event handlers

Alternativ kannst du mit JavaScript und CSS einen eigenen Player erstellen.

// TODO: DevSite - Code sample removed as it used inline event handlers