initiation à HTML5
Audio et HTML5
L'ajout de son dans les pages web n'est pas nouveau. Il n'y a cependant jusqu'ici pas de solution officielle. La plupart des anciennes pratiques reposaient sur des codes javascripts ou des programmes flash qui n'étaient pas universels. HTML5 apporte alors le support natif par le navigateur à l'aide de la compréhension d'un élément et de quelques attributs simples.
Ajouter de l'audio en codant
Vous voilà dans votre fragment HTML. Placez-vous à l'endroit où vous désirez que le morceau audio apparaisse.
Codez par exemple :
<audio src="audio/Suite_Espanola_Op_47_Leyenda.mp3" width="100" />
Que se passe-t-il ici ? Rien de très particulier. L'élément audio permet d'ajouter le son et l'attribut src de spécifier le fichier à jouer. Ce fichier audio doit ici être placé dans un sous-dossier audio du fichier courant. Il est possible de passer des adresses URL complètes si les serveurs acceptent la diffusion des sons.
Notons que width définit la largeur de la fenêtre audio qui sera présente et que controls permet l'affichage des boutons de lancement et d'arrêt de la lecture de son. Voici un petit exemple :
<audio id="audio1" src="http://freedownloads.last.fm/download/466248492/Aperture.mp3" width="200px" controls ></audio>
Ce qui donne ici le résultat suivant :
Il est important d'avoir à l'esprit que l'aspect des boutons de contrôle est propre à chaque navigateur.
sur safari
sur chrome
Comme pour le fichier vidéo, il est possible d'utiliser le sous-élément source pour fournir au navigateur plusieurs format au choix.
<audio id="audio1" > <source src="http://freedownloads.last.fm/download/466248492/Aperture.mp3" width="200px" controls /> </audio>
Le résultat sera identique dans les 2 cas sauf que la navigateur utilisera la source qu'il préfère s'il y en a plusieurs.
Contrôler le son en HTML5
Certains attributs facilitent grandement la façon dont le site et l'utilisateur peuvent interagir.
- controls
- Affiche les barres de navigation dans la video avec entre autres une barre temporelle et un bouton lecture/pause. L'implementation des contrôles est propre à chaque navigateur. Les boutons disponibles ainsi que leur aspect peut donc différer.
- autoplay
- permet de lancer la video dès le chargement de la page. Cette pratique est largement utilisée dans les publicités mais cependant moins pour le contenu. On préférera en effet en général que l'utilisateur lance lui-même la vidéo, assurance qu'il est disponible pour en profiter pleinement.
- loop
- permet de faire tourner en boucle la vidéo. Très utile aussi dans les cas d'une approche publicitaire, mais trop distrayant si la vidéo accompagne un article. Il faut laisser à l'utilisateur pouvoir continuer tranquillement, sa lecture.
- muted
- assurera que la vidéo, en particulier en autoplay, sera lancée sans le son, silencieusement. Il appartiendra alors au visiteur d'activer le son s'il le désire. Il s'agit d'une pratique non intrusive et respectueuse.