Guida rapida all'implementazione del tag audio HTML5

Ernest Delgado
Ernest Delgado
X

Passaggio 1: avvolgi l'oggetto Flash con il tag audio

I browser che non riconoscono il tag audio caricheranno i contenuti 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>

Passaggio 2: aggiungi il riferimento all'origine

Possiamo aggiungere tutte le righe e i formati "source" che vogliamo. Se il browser non supporta un formato specifico, utilizzerà quello successivo e così via.

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

Passaggio 3. Aggiunta di creatività di riserva a Flash

Per sicurezza, dobbiamo aggiungere la riserva a un lettore audio Flash nel caso in cui il browser non supporti nessuno dei formati da noi specificati. Ad esempio, Firefox 3.5 supporta solo il tag audio con il formato Ogg, ma potremmo avere a disposizione solo il file 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>

Per rendere il tutto più semplice, stiamo utilizzando la libreria SWFObject per inserire il Flash player tramite JavaScript. Per includere la libreria, è sufficiente utilizzare l'API Google AJAX Libraries inserendo queste due righe nell'intestazione:

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

Passaggio 4: aggiungi i controlli predefiniti per mostrare il player

Questi controlli non sono personalizzabili (vedi gli esempi alla fine). Poiché questi controlli predefiniti vengono visualizzati indipendentemente dal formato supportato, dovremo gestirne la visibilità con il condizionale creato in precedenza.

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

In alternativa, puoi creare il tuo player personale usando JavaScript e CSS.

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