Vous aussi, apprenez comment ajouter simplement et rapidement un player audio, compatible tout navigateur, avec HTML5.
Découvrez la technique dans le cours vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment ajouter un player audio HTML5 compatible tout navigateur
Bonjour à tous et bienvenu sur Développement Facile.
Toujours un cours consacré HTML 5 et aux nouvelles balises, vous en avez sûrement entendu parler, grâce à HTML 5 il est beaucoup plus simple d’utiliser des lecteurs audio, et les lecteurs vidéo, plus besoin de coder en langage flash avec l’ActionScript 3, vous avez une seule balise à mettre avec les différentes options, et ça ajoute directement un lecteur audio ou un lecteur vidéo. Ce cours est consacré à la lecture de fichiers audio grâce à HTML 5.
L’ajout d’un fichier audio
Comment ça marche ? Vous avez comme je vous l’ai dit, une seule balise, la balise audio avec plusieurs attributs qui va vous permettre de mettre différentes options dans votre balise audio. Vous avez l’attribut src c’est là ou vous donner l’adresse, l’URL de votre fichier son, il peut être situé sur un autre domaine, ou sur votre domaine, dans un répertoire, dans l’arborescence de vos domaines, n’importe où. Ensuite vous avez le champ, l’attribut controls ça va vous permettre de choisir d’afficher les contrôles du lecteur audio, donc la lecture, l’arrêt, l’avancement et le volume, ou de les masquer, ça c’est vous qui choisissez en fonction du type de Player audio que vous souhaitez proposer à vos utilisateurs. Vous avez autoplay pour la lecture automatique des fichiers audio donc dès l’affichage de la page par exemple, loop ça veut dire qu’une fois que le fichier son est terminé de lire, il est lu en boucle par le lecteur audio et preload donc je vous conseille d’utiliser également cet attribut, ça permet d’activer ou non le téléchargement du fichier audio lors du chargement de la page, donc preload none, il n’y a rien, le fichier audio n’est pas pré chargé, rien. Preload égal metadata il y a juste le pré chargement des métadonnées du fichier audio qui s’effectue, et preload auto ce que je vous conseille d’utiliser, ça fait un pré chargement automatique du fichier audio, après quand utilisateur va cliquer sur Play, ce sera un instantané parce que le fichier audio sera déjà chargé par le navigateur.
Voyez l’exemple de code source, il tient en une seule ligne, très facile, faites audio src égal jingle.ogg, les contrôles, le preload, et on met un petit texte, votre navigateur ne supporte pas la balise audio, au cas où, que votre visiteur ne supporte pas l’HTML 5, on lui indique par un petit message, comme quoi son navigateur est obsolète. Il faut savoir que le HTML 5 peut lire les fichiers MP3, les fichiers ogg, aac, tout ça je vais vous le récapituler dans un cours complet, le support des fichiers audio, le support des fichiers vidéo, tout simplement.
Les formats pris en charge, je mets un petit extrait dans ce cours pour l’audio, et dans le cours pour la vidéo et après je rentrerais un peu plus dans le détail dans un prochain cours. Vous avez le format ogg, comme je vous l’ai dit un format libre et performant avec une qualité supérieure au format MP3, l’ HTML 5 peut lire des fichiers audio, bien évidemment, en format MP3, le bien connu MP3 qui est une compression avec une perte de qualité sonore significative, mais qui reste toutefois acceptable pour l’oreille humaine. Vous avez le format, pardon j’avais dit aac tout à l’heure mais je pensais acc, Advanced Audio Coding, non c’est bien aac, excusez-moi, c’est moi qui ai fait une faute d’orthographe, excusez-moi pour la faute d’orthographe, c’est bien le format aac, pour Advanced Audio Coding, qui est plus performant encore en compression que le format ogg, et MP3, et pour ceux qui ont un iPod ou une tablette IPad ou un Ipod, c’est le format utilisé par Apple, et vous avez également le format wav qui est supporté par la balise audio HTML 5, donc là il n’y a aucune compression, la taille des fichiers Web est beaucoup trop importante pour le Web donc je vous déconseille de l’utiliser, ou ce que je vous conseille d’utiliser, c’est soit le format AAC, ou ogg et en dernier le MP3.
La balise <source>
La balise source ça permet de spécifier plusieurs fichiers audio, il faut savoir que tous les navigateurs Web ne savent pas lire tous les formats de fichiers, entre FireFox, Internet Explorer, Google Chrome, opéra, les navigateurs sur les Smartphones, et sur les tablettes, il y en a, ils reconnaissent le MP3, d’autres des fichiers au format ogg, d’autres aac, chacun, chaque navigateur reconnait ses formats, d’où la balise source, comme ça dans la balise audio vous précisez plusieurs URL à un format différent, et ainsi vos fichiers audio deviennent lisible par tous les navigateurs récents. Donc là, vous avez un exemple de code source, utilisation de la balise audio avec les contrôle preload, on lui donne un fichier au format ogg, au format MP3, au format AAC, encore la même erreur, décidément donc au format Jingle.AAC, et le player MP3 compatible avec la majorité des navigateurs.
Votre plan d’actions !
Comme d’habitude, vous retrouverez un exemple de code source sous cette vidéo, je vous invite à le télécharger, à l’utiliser après pour vous en inspirer pour créer vos propres sites Internet, donc amusez-vous à ajouter des Player audio dans vos pages Web en HTML 5, si vous avez des questions, posez-les directement sous ce cours vidéo. Je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez le code source HTML5
Voici un exemple de code source HTML5 d’un player audio.
Téléchargement du code source Un Player audio avec HTML5
