De la musique en continu sur un site, sans coupure ?

Astuce par Florent V. (Chef de projet, intégrateur web, Lyon, France)
Mis à jour le 01 Juin 2009. 8852 lectures.
Tags : web, audio, musique, son

Une question qui revient régulièrement: comment sonoriser un site, sans que la musique ne se coupe lors du changement de page?

Quels moyens pour jouer de la musique ?

À l'heure actuelle, les navigateurs ne jouent pas directement les fichiers musicaux, ou supportent très mal les différents formats & codecs audio utilisés. Il faut passer par un plugin, par exemple Windows Media, Quicktime ou Real. L'alternative la plus répandue l'utilisation de Flash car elle représente désormais la solution la plus universelle. Flash permet de lire de la musique au format MP3. Il existe des lecteurs tels que Dewplayer.

Une musique de fond ?

Avant tout

Pensez au confort des visiteurs qui écoutent peut-être déjà leur propre musique. Placer une musique en fond est dans la majorité des cas considéré comme extrêmement dérangeant. L'utilisateur n'est pas toujours en situation de visiter un site sonorisé. Par exemple:

  • l'utilisateur n'a peut-être pas le son, ou ne l'a pas activé (la musique est alors téléchargée inutilement)
  • l'utilisateur écoute déjà de la musique, et toute musique supplémentaire serait parasite
  • l'utilisateur est au bureau, et ne préfère pas que de la musique surgisse tout à coup de son poste de travail

Proposez toujours un bouton (bien visible) pour arrêter la musique. Si la musique n'a pas de rapport direct avec le site, ne la lancez pas automatiquement.

Persistance du son au changement de page

A cela s'ajoute la problématique de la persistance de la lecture : changer de page revient à changer de document web, c'est à dire à fermer un document pour en ouvrir un autre. Lors du changement de page, tout plugin ou animation Flash intégrée à la page sera arrêtée. Ce qui signifie coupure brutale du son en cours de lecture.

Il faut donc garder un document ou une partie de document toujours ouvert dans le navigateur. Parmi les solutions possibles :

  1. Utiliser des frames. Une frame portera le lecteur et peut-être d'autres éléments (par exemple un menu de navigation), tandis que la deuxième frame affichera le contenu. Effets secondaires: problèmes possibles d'accessibilité et de référencement.
  2. Faire un site entièrement en Flash. Effets secondaires: problèmes possibles d'accessibilité, et problèmes certains de référencement.
  3. Faire un site dont tous les contenus sont chargés en Ajax. Effets secondaires: problèmes possibles d'accessibilité, et problèmes certains de référencement.
  4. Proposer au visiteur d'ouvrir une fenêtre pop-up contenant un lecteur Flash jouant une musique, ou permettant de lire des morceaux. Cela peut se faire avec la Zanorg Radio (http://radio.zanorg.com/) ou quelque chose d'équivalent.