Easy-Micro

TECHNIQUE Technique
Code audio
Jouer un son dans une page HTML

Xhtml et le son Proposez un lecteur MP3 en ligne

<object type="application/x-shockwave-flash" data="dewplayer.swf?mp3=test.mp3" width="200" height="20">
<param name="movie" value="dewplayer.swf?mp3=test.mp3" />
</object>

Explication:
Est utilisé ci-dessus le dew Player (dewplayer.swf). Il s'agit d'une animation SWF toute faite - et gratuite (même pour une utilisation commerciale!) - qui permet de lire un fichier MP3 (ex: adhara.mp3).

Peut-être téléchargée sur le site de ses créateurs : Alsacreations. Ce fichier est enregistré dans le même dossier que la page HTML qui contient ce code (sinon, faire des liens absolus).

Un peu de musique ? Friends - I'll Be There for You par The Rembrandts!  Un peu de musique ? FunkyTown par Lipps Inc!  Un peu de musique ? In the mood!  Un peu de musique ? Born to be alive par Patrick Hernandez!  Un peu de musique ? You Know I'm No Good par Amy Winehouse!  Un peu de musique ? See you again par Miley Cyrus! 

Xhtml et le son Jouer un son dans une page XHTML
Un mixte des balises OBJECT et EMBED est le plus souvent utilisé afin d'avoir un code HTML compatible pour l'ensemble des navigateurs du marché.

<object data="musique.mp3" type="audio/mpeg" width="300" height="45">
<param name="src" value="musique.mp3" />
<param name="controls" value="console" />
<param name="autostart" value="false" />
<param name="loop" value="0" />
<embed src="musique.mp3" width="300" height="45" controls="console" loop="0" autostart="false" />
</object>
Attention, dans le code ci-dessus, le nom du fichier audio doit-être saisie 3 fois.


Un peu de musique ? Friends - I'll Be There for You par The Rembrandts!  Un peu de musique ? Hotel California par les Eagles  Un peu de musique ? You Know I'm No Good par Amy Winehouse!  Un peu de musique ? Born to be alive par Patrick Hernandez!  Un peu de musique ? See you again par Miley Cyrus!  Un peu de musique ? FunkyTown par Lipps Inc!
 Un peu de musique ? Baila Morena par Zucchero !

Explication :
• musique.mp3 : fichier audio à exécuter.
• audio/mpeg : mention du type MIME (Multipurpose Internet Mail Extension). Cette norme permet de faciliter la reconnaissance des types de fichiers. Optionnel dans une page Html, cette mention deviens obligatoire dans une page Xhtml.
• controls : insére une barre de contrôle. Lecteur visible.
• loop : nombre de boucle de lecture. false (= 1 fois) ou true (= en boucle)
• autostart : true = lecture auto et false = lecture en appuyant sur le bouton.
• Pour éviter un affichage visible du lecteur de sons, est nécessaire la mention <param name="hidden" value="true"> (hidden = caché).

Si vous voulez avoir un code compatible Xhtml (validé par le W3c), il suffit de rajouter un petit bout de javascript dans la balise "object":

<object data="musique.mp3" type="audio/mpeg" width="300" height="45">
<param name="src" value="musique.mp3" />
<param name="controls" value="console" />
<param name="autostart" value="false" />
<param name="loop" value="0" />
<script type="text/javascript">
<!--
if (!document.all) {
document.write('<embed src="musique.mp3" width="300" height="45" controls="console" loop="0" autostart="false"></embed>');
}
//-->
</script>
</object>
L'objet "all" est une composante du langage JScript - la variante Microsoft de JavaScript. Renvoie "false" avec Mozilla Firefox. Le "if (!document.all)" se traduit par "si not false document.all" soit "si c'est Firefox".

Quelques boutiques 
• FnacMusic : Boutique Fnac. Format WMA et MP3.
• iTunes Music Store : Boutique Apple pour les lecteurs iPod. Formats MP3 et AAC.
• MSN Musique : Boutique Microsoft. Format WMA.
• Virgin Mega : Boutique Virgin. Format WMA.

Attention : Les oeuvres audio sont protégées par des droits d'auteur. Le fait de diffuser une oeuvre audio sans avoir l'assentiment de son créateur constitue un crime.

< Page précédente TECHNIQUE Page suivante >