4. Créer des lecteurs audio

Maintenant que nos Pokémons ont droit à un petit portrait, je vous propose de nous en écarter un peu, juste le temps de 2 étapes, pour découvrir l’audio et la vidéo. En effet, on ne va pas forcément en mettre dans notre Pokédex, parce que ça ne sera pas très utile, mais je vous apprends quand même à les utiliser, ça vous servira sûrement un jour.

Les lecteurs audio aussi ont droit à une balise : la balise “audio”. Elle fonctionne un peu comme “img”, mais elle possède quelques attributs facultatifs en plus. Imaginons que je veuille mettre une musique téléchargée :

<audio src="assets/musique.mp3">

Il est possible de lui ajouter des attributs booléens, cela signifie qu’ils ne prennent pas de valeur : soit on les active soit on ne les active pas. C’est le cas de “controls” qui va indiquer si oui ou non on met les boutons de contrôle à côté du lecteur (play/pause, volume…). Par défaut, c’est désactivé mais si on ajoute l’attribut “controls”, les boutons apparaîtront :

<audio src="assets/salameche.mp3" controls>

Il existe 2 autres attributs booléens qui peuvent vous être utiles : “loop” et “autoplay”. “loop” permet de faire tourner le fichier en boucle, et autoplay sert à lancer le fichier automatiquement quand on arrive sur la page. Ils fonctionnent exactement comme “controls”. N’hésitez pas à jouer avec ces attributs, pour vous familiariser avec.

En réalité, il existe de nombreux attributs pour chaque balise, mais je ne vous montre que les plus importants. Vous pouvez découvrir TOUTES les balises de HTML et leurs attributs par catégorie sur MDN Web Docs, la documentation du Web ! Vous allez voir, il y en a beeauuucoup. Mais rassurez-vous, personne ne les connaît toutes par coeur ! 😉

Et bien voilà, l’audio n’a plus de secret pour vous en HTML. Dans la prochaine étape, nous allons voir le dernier élément multimédia : la vidéo. Vous allez voir qu’il fonctionne exactement comme l’audio, à l’exception qu’on utilise pas la même balise.