Formation 36

Insérer un fichier audio

En fond sonore

Il existe une balise HTML peu connue qui permet de lire un son dès l'ouverture d'une page, sans aucune intervention de l'internaute : c'est la balise bgsound.

 

Le code suivant se place entre les balises <head> et </head>.

<bgsound src="chemin/acces/fichier.mp3" loop="1" volume="-200" balance="+10000" >

 

Ses attributs sont les suivants :

  • src="..." : l'URL du fichier son

  • loop="..." : nombre de répétitions ( -1 ou infinite , n )

  • volume="..." : réglage du volume sonore. Valeurs possibles de -10,000 à 0, avec 0 correspondant au volume maxi (full Wave Output volume)

  • balance="..." : réglage de la balance entre les hauts-parleurs de droite et de gauche.
    Valeurs possibles de -10,000 à +10,000 . La valeur -10,000 indique que le son est entièrement dirigé vers le haut parleur de gauche. La valeur +10,000 indique que le son est entièrement dirigé vers le haut-parleur de droite. La valeur 0 indique que le son est équilibré entre les deux hauts-parleurs.

  • disabled="..." : active ou désactive le contrôle ( true, false )

Malheureusement, cette balise n'est reconnue que par Internet Explorer et n'est pas conforme aux règles édictées par le W3C. Pour que le son soit reconnu par tous les navigateurs, il est également possible de créer une animation flash qui embarque l'extrait sonore (1px de côté est suffisant, pour que l'animation passe inaperçue à l'écran).

Avec un lecteur embarqué (lecture / stop / gestion du son)

Le site Alsacréations propose un mini-lecteur embarqué à la fois sobre et sophistiqué.

Pour en savoir plus et récupérer le fichier dewplayer.swf (l'animation flash autonome qui sert de lecteur), consultez le site http://www.alsacreations.fr/dewplayer.

 

Le code d'insertion se résume alors à :

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



Pour plus d'informations, vous pouvez nous contacter par mail.

 

Tutos et cours en ligne

Ergonomie et accessibilit�R�f�rencementHTML / CSS