L'essentiel du HTML5

Insérer de l'audio et découvrir ses formats

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La balise <audio> permet d'insérer du son dans vos contenus. Afin d'assurer la bonne prise en compte du transfert des fichiers, vous devez bien renseigner le type du format utilisé.
05:40

Transcription

À l'instar de la balise picture, ici nous avons une balise audio qui va nous permettre de pouvoir placer toute une série de fichiers audio pour être lus dans le navigateur. Alors on pourrait très bien dans la balise audio ajouter directement un attribut src pointé vers le format de fichier qui va bien. Mais cela lilmiterait l'utilisabilité de cette balise dans le sens où on imposerait un format de fichier et si ce format de fichier n'est pas compris par le navigateur, ça ne serait pas lu. Alors ce qu'on va faire, c'est plutôt utiliser la balise source au sein d'audio, comme on l'a fait pour picture pour pouvoir définir plusieurs sources et le navigateur choisira celle qu'il peut utiliser ou pas. Donc, ce qu'on va regarder d'entrée de jeu, c'est les attributs nécessaires à mettre dans la balise audio qui vont être primordiaux, on va dire. Donc, la balise preload, ici, va assurer un préchargement en tout ou partie de ce fichier. Donc, on pourrait par exemple demander de charger preload metadata. qui chargerait l'en-tête, on pourrait connaitre la durée, certaines informations ou on pourrait dire oui, tu vas précharger complètement le fichier. Ou, ne pas précharger ce fichier justement. Alors, ce qui est intéressant de regarder dans le preload, c'est les diverses possibilité qu'on a, non, auto ou metadata pour pouvoir lancer plus rapidement le fichier. Personnellement, je préfère ne pas le charger à ce niveau là et laisser à l'utilisateur le choix de lancer la lecture du fichier ou pas. Ensuite, est ce que je veux qu'il y ait une barre de contrôle qui s'affiche pour faire play, pause, stop ou pas ? On peut la cacher. Si l'attribut est présent, la barre de contrôle sera présente. Muted, ça veut dire que le son sera coupé au départ. Et ça, c'est très bien parce que ça permet dès le chargement de la page de ne pas lancer le fichier audio. Ce qui des fois, quand l'utilisateur ouvre plusieurs pages en simultanée, peut être embarassant, peut être génant. Autoplay, ça va être mis en route automatiquement. Alors, si cette propriété est présente, le fichier se lancera Comme il est muted, on ne l'entendra pas mais il sera lancé Si on ne met pas la propriété autoplay à ce moment là, le fichier ne se lancera pas. Ensuite, loop. C'est à dire qu'une fois que le fichier sera terminé il recommencera. Et maintenant que tous ces attributs principaux ont été définis, on va pouvoir venir définir la source de ce fichier. Vous avez vu qu'instantannément, il est muté et en plate puisqu'automatiquement, ce sont les attributs qui sont rencontrés dans la balise audio. Moi, je vais explicitement le mettre en pause. La source, il suffit de mettre le src puis le dossier média. Ici, on est dans ce dossier média, ici, et on a l'ensemble de nos fichiers. Nos fichiers, eh, bien, ont été convertis. Alors ici, vous avez un fichier source qui est très lourd, qui est à la base, du mp4. Mais il faudra le convertir dans les trois formats les plus couramment rencontrés par les navigateurs. Qui sont le mp3, le m4a, et le format ogg. En tant que fichier audio par l'ensemble des navigateurs. Alors pour les convertir, vous avez plusieurs possibilités. Soit vous utilisez un convertisseur en ligne de type par exemple, media.io ou alors vous pouvez utiliser switch, qui est un autre logiciel qui n'est pas en ligne mais qui va vous permettre de convertir tout un certain nombre de fichier de manière batch de manière process. Ou alors, vous pouvez télécharger des outils de type foobar2000 Ou audacity. Alors audacity, l'intérêt c'est qu'il marche sur toute plateforme mac, pc, linux. Et donc, vous allez pouvoir avec cet outil, non seulement travailler votre audio le filtrer, le nettoyer, mais en plus l'exporter vers certains formats de fchier. Faites attention, l'exportation au format mp3 nécessite une librairie qui s'appelle LAME. Et qu'il faut installer de manière indépendante. Alors, vous pouvez avoir certains installeurs qui mettront à la fois la librairie LAME. Sinon, il faudra aller la télécharger, l'installer sur votre machine pour la rendre opérationnelle avec Audacity par exemple. Une fois que vous avez converti l'ensemble de vos fichiers audio, vous allez pouvoir tous les énumérer. Donc ici, j'ai mis le fichier mp3, le fichier m4a, le fichier ogg. Il va falloir renseigner un attribut supplémentaire. Alors, on l'a pas fait tout à l'heure pour la balise picture mais pour la balise audio, je vous conseille fortement de le faire. On aurait pu le faire pour la balise picture également. C'est de définir le type mime de chacun de ces fichiers. Donc ici, le type c'est du audio/mpeg, du audio/mp4 et du audio/ogg. Pour pouvoir bien définir la nature de chacun de ces éléments. On peut donc utiliser également un ; et définir le codec audio qui aura été employé pour compresser le fichier. Ensuite, si le navigateur ne connait pas la balise audio, ou ne comprends aucune de ces sources là, À ce moment là, il faut rajouter une balise. Alors ça pourrait être un lien de téléchargement pour inviter l'utilisateur à télécharger le fichier audio mais ici, on va simplement mettre une phrase qui indiquera que la balise audio n'est pas prise en compte. Une fois tout ceci renseigné, je vous conseille une dernière préconisation. C'est de fabriquer un fichier htaccess que vous placer soit à la racine de votre site, soit dans le dossier des médias. Et là, vous allez redéfinir de manière, bien entendu si vous travailler avec Apache, ce qui est à 95% des situations, le cas. De redéfinir les type audio/ogg, c'est les formats .oga ou .ogg, mpeg4, c'est mp4 ou mp4a, acc, etc... De façon à pouvoir redéfinir l'ensemble de ces fichiers pour être sûr que le serveur les délivre de manière correct et non pas sous forme de chaine binaire qui ne serait pas interprétée par le navigateur. Une fois ceci fait, vous avez maintenant votre fichier audio qui peut se lire directement. Donc, je vous invite à venir tester surtout les convertisseurs en ligne. Et à implémenter cette balise audio au sein de vos pages.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !