Guida rapida all'implementazione del tag audio HTML5

Ernest Delgado
Ernest Delgado
X

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

I browser che non riconoscono il tag audio caricheranno invece i contenuti Flash.

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

Passaggio 2: aggiungi il riferimento all'origine

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

 <audio>
  <source src="test.mp3" type="audio/mpeg" />
  <source src="test.ogg" type="audio/ogg" />

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

Passaggio 3: aggiungi il fallback a Flash

Per sicurezza, dobbiamo aggiungere il fallback a un player audio Flash, nel caso in cui il browser non supporti nessuno dei formati che abbiamo specificato. Ad esempio, Firefox 3.5 supporta solo il tag audio con formato Ogg, ma potremmo avere a disposizione solo il file mp3.

<audio>
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  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>

Per semplificare, utilizziamo la libreria SWFObject per inserire il player Flash tramite JavaScript. Per includere la libreria, puoi semplicemente utilizzare l'API Google AJAX Libraries inserendo queste due righe nell'intestazione:

<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>

Passaggio 4: aggiungi i controlli predefiniti per mostrare il player

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

<audio id="audio_with_controls" controls="controls">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script line here ...
      document.getElementsById('audio_with_controls').style.display = 'none';
    }
  }
</script>

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

<audio id="audio">
  <source src="test.mp3" type="audio/mpeg" />
  <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>

<div id="player_fallback"></div>
<div id="player" style="display: none">
  <button onClick="document.getElementById('audio').play()">Play</button>
  <button onClick="document.getElementById('audio').pause()">Pause</button>
</div>

<script type="application/javascript">
  if (document.createElement('audio').canPlayType) {
    if (!document.createElement('audio').canPlayType('audio/mpeg')) {
      ... SWFObject script lines here ...
    } else { // HTML5 audio + mp3 support
      document.getElementById('player').style.display = 'block';
    }
  }
</script>