Étape 1: Encapsulez votre objet Flash avec la balise audio
Les navigateurs qui ne reconnaissent pas la balise audio chargeront le contenu Flash à la place.
<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>
Étape 2: Ajoutez la référence source
Nous pouvons ajouter autant de lignes et de formats de "source" que nous le souhaitons. Si le navigateur n'est pas compatible avec un format spécifique, il passe au suivant, et ainsi de suite.
<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>
Étape 3: Ajoutez un remplacement à Flash
Pour plus de sécurité, nous devons ajouter un lecteur audio Flash en cas de non-compatibilité du navigateur avec l'un des formats que nous avons spécifiés. Par exemple, Firefox 3.5 n'est compatible qu'avec la balise audio au format Ogg, mais il est possible que le fichier mp3 soit le seul disponible.
<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>
Pour simplifier, nous utilisons la bibliothèque SWFObject pour insérer le lecteur Flash via JavaScript. Pour inclure la bibliothèque, vous pouvez simplement utiliser l'API Google AJAX Libraries en insérant ces deux lignes dans votre en-tête:
<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>
Étape 4: Ajoutez les commandes par défaut pour afficher le lecteur
Ces commandes ne sont pas personnalisables (voir les exemples à la fin). Étant donné que ces commandes par défaut s'affichent quel que soit le format compatible, nous devons gérer leur visibilité avec la condition que nous avons créée précédemment.
<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>
Vous pouvez également créer votre propre lecteur à l'aide de JavaScript et de 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>