Krótki przewodnik po implementacji tagu audio HTML5

Ernest Delgado
Ernest Delgado
X

Krok 1. Dodaj tag audio do obiektu Flash

Te przeglądarki, które nie rozpoznają tagu audio, będą wczytywać treści Flash.

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

Krok 2. Dodaj odwołanie do źródła

Możemy dodać dowolną liczbę wierszy i formatów „źródłowych”. Jeśli przeglądarka nie obsługuje jednego konkretnego formatu, nastąpi przejście do kolejnego itd.

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

Krok 3. Dodaj kreację zastępczą do Flasha

Na wszelki wypadek musimy dodać kreację zastępczą do odtwarzacza audio Flash, na wypadek gdyby przeglądarka nie obsługiwała żadnego z określonych przez nas formatów. Na przykład Firefox 3.5 obsługuje tylko tag audio w formacie Ogg, ale możemy mieć dostępny tylko plik mp3.

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

Dla uproszczenia używamy biblioteki SWFObject do wstawiania odtwarzacza Flash za pomocą JavaScriptu. Aby dołączyć bibliotekę, możesz po prostu użyć interfejsu Google AJAX Libraries API, wstawiając te 2 wiersze w nagłówku:

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

Krok 4. Dodaj domyślne elementy sterujące, aby pokazać odtwarzacz

Tych elementów sterujących nie można dostosowywać (zobacz przykłady na końcu). Te domyślne opcje będą widoczne niezależnie od obsługiwanego formatu, więc trzeba będzie zapewnić ich widoczność za pomocą utworzonego wcześniej warunkowego formatu.

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

Możesz też utworzyć własny odtwarzacz, korzystając z JavaScriptu i CSS.

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