Guide rapide d'intégration de la balise audio HTML5

Ernest Delgado
Ernest Delgado
X

Étape 1: Encapsulez l'objet Flash avec le tag audio

Dans les navigateurs qui ne reconnaissent pas le tag audio, le contenu Flash est chargé à la place.

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

Étape 2: Ajoutez la référence source

Nous pouvons ajouter autant de lignes et de formats "source" que nous le souhaitons. Si le navigateur ne prend pas en charge un format spécifique, il utilise le format suivant et ainsi de suite.

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

Étape 3: Ajoutez la création de remplacement au format Flash

Par mesure de sécurité, nous devons ajouter la création de remplacement à un lecteur audio Flash, au cas où le navigateur ne serait pas compatible avec les formats que nous avons spécifiés. Par exemple, Firefox 3.5 n'accepte que le tag audio au format Ogg, mais il est possible que seul le fichier mp3 soit disponible.

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

Pour faciliter le processus, nous utilisons la bibliothèque SWFObject pour insérer le lecteur Flash via JavaScript. Pour inclure la bibliothèque, il vous suffit d'utiliser l'API Google AJAX Libraries en insérant ces deux lignes dans votre en-tête:

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

Étape 4: Ajoutez les commandes par défaut pour afficher le lecteur

Ces commandes ne sont pas personnalisables (voir les exemples à la fin). Comme ces commandes par défaut s'afficheront quel que soit le format compatible, nous devrons gérer leur visibilité à l'aide de la condition que nous avons créée précédemment.

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

Vous pouvez également créer votre propre lecteur à l'aide de JavaScript et CSS.

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