Intégration de fichiers son
Table des matières
Par Nanoum (Anne Weisbeck), le 13 août 2005L'insertion d'une musique dans une page peut se faire avec la balise <bgsound> qui permet de mettre une musique en fond sonore de page, mais qui ne fonctionnera que sous Internet Explorer, ou avec la balise <embed> qui elle est dédiée à l'insertion des éléments multimédia.
Les principaux formats de fichiers son
.aiff ou .aif
Audio Interchange File Format. Format Macintosh. Ce type de fichier ne nécessite pas de plug-in pour être lu et est reconnu directement par le navigateur.
.mdi ou .midi
Musical Instrument Digital Interface. Est destiné à des musiques uniquement instrumentales. La qualité du son ne dépendra pas du fichier d'origine mais de la carte son de l'utilisateur. Ne nécessite pas de plug-in.
.mp3
Motion Picture Experts Group Audio. Permet une grande compression pour une bonne qualité en retour. Ne peut être lu directement par le navigateur et nécessitera un plug-in (QuickTime, RealPlayer ou Windows Media Player).
.rpm ou .ra ou .rm
Format RealAudio Grande compression donnant des fichiers plus petits que le mp3 mais avec une qualité moindre. Nécessite le plug-in RealPlayer.
.wav ou .wave
Waveform Extension. Format Windows. Offre une bonne qualité de son mais le poids des fichiers est vite conséquent. Ne nécessite pas de plug-in.
La balise <bgsound>
Cette balise ne fonctionne que pour Internet Explorer et doit se placer entre les balises <head> et </head> de votre page. La rapidité de lancement du fichier son dépendra de sa taille, il se peut donc que la musique ne se lance pas au démarrage de la page si elle n'est pas totalement chargée.
Exemple d'intégration avec <bgsound> :
<head> <bgsound src="fond.mp3" loop="-1"> </head>
La balise <embed>
Cette balise n'est pas une balise spécifique à l'intégration d'éléments sonores mais à l'intégration d'éléments multimédias, elle peut donc servir entre autre à incorporer du son dans une page. Elle permet d'intégrer n'importe quel fichier sonore et devra faire appel dans certains cas à un plug-in. Cette balises n'est pas toujours reconnue par les plus anciens navigateurs, il est pour cela conseillé d'utiliser les balises <noembed> </noembed> et d'y mettre entre un texte qui s'affichera si les balises <embed> </embed> ne sont pas reconnues.
Principaux attributs de la balise <embed> :
Comme pour une image, il est préférable de toujours spécifier des valeurs aux attributs width et height afin que le navigateur puisse construire la page plus rapidement. Si le panneau de l'élément sonore ne doit pas être visible, vous pouvez alors attribuer 0 comme valeur.
Certains attributs supplémentaires pourront également être définis suivant le plug-in utilisé :
Manipulation en javascript
L'élément <embed> peut être contrôlé à l'aide des deux fonctions javascript play() et stop() Pour accéder à un élément <embed> il est préférable que celui-ci ait un attribut name renseigné. Ainsi, pour y accéder, on utilisera la syntaxe suivante :
document.embeds['nomdelamusique']
Si l'élément n'est pas identifié à l'aide de l'attribut name, il est également possible d'y accéder ainsi :
document.embeds[0]
où embeds[0] correspondra au premier <embed> déclaré dans la page, embeds[1] étant le suivant, etc.
La fonction play() permet de lancer l'élément appelé par la balise <embed> et la fonction stop() permet d'en arrêter la lecture. Cependant, la fonction stop() s'apparente plus à une pause qu'à un réel stop car la tête de lecture restera là où elle aura été arrêtée.
Exemple d'insertion d'un fichier son dans une page avec une fonction stop() et une fonction play() :
<HTML>
<HEAD>
<script language="javascript">
<!--
function lecture(mamusique){
document.embeds[mamusique].play();
}
function arret(mamusique){
document.embeds[mamusique].stop();
}
//-->
</script>
</HEAD>
<BODY>
<embed src="fond.mp3" width="250" height="50" autostart="true" loop="true" hidden="true" name="fondsonore"></embed>
<a href="javascript:arret('fondsonore')">arreter la musique</a>
<a href="javascript:lecture('fondsonore')">reprendre la musique</a>
</BODY>
</HTML>
Animations Flash
Il est également possible d'intégrer une musique en ayant recours à une animation flash. Ceci peut par exemple permettre de créer ses propres boutons de lecture/pause. Pour ceci, allez voir la section Gestion du son des tutoriaux de Flash-Forum.
