Intégrer de l'audio à son site internet

Lorsqu'on développe un site internet, on à souvent besoin d'y ajouter un son, un fichier audio. Que vous soyez podcasteur ou amateur de train, une petite balise audio permettra de faire écouter votre passion. C'est l'objet de ce petit dossier.

Balise audio HTML5

Le HTML, pour HyperText Markup Language, est le language de base d'une site internet. Actuellement, la version 5 est la plus répandue. Associé au CSS, il sert à l'écriture de l'hypertexte indispensable à la mise en forme d'une page Web.

Sa version 5 intègre nativement un élément destinée à l'audio : <audio>

La base

Voici la balise basique pour intégrer un audio à votre page. Comme il fonctionne, vous pouvez le copier/coller directement, tel qu'il est, pour le tester :

<audio src="https://lasonotheque.org/UPLOAD/mp3/1890.mp3" controls>
    Votre navigateur ne prend pas en charge l'audio HTML5. Voici un <a href="https://lasonotheque.org/UPLOAD/mp3/1890.mp3">lien vers le fichier audio</a> à la place.
</audio>

On y retrouve :

- <audio> : la balise d'ouverture de l'élément.
- un attribut source (src='') contenant un fichier au format mp3 pour une comptabilité avec tous les navigateurs.
- "controls" : un attribut qui permet d'afficher le player.
- Une ligne de texte qui s'affiche si le navigateur n'est pas compatible avec le lecteur HTML5.
- </audio> : la balise de fermeture de l'élément.

A noter que le look du player est différent selon votre terminal (mobile, tablette, ordinateur, etc.), selon votre OS (MacOS, Windows, iOS, Android, etc.), selon votre navigateur (Chrome, Firefox, Safari, etc.), selon sa version.

Ce code donne le résultat suivant :

Plusieurs formats

Pour aller plus loin, il est possible d'ajouter plusieurs formats audio, pour être certain que le navigateur du client soit compatible. Les deux principaux sont OGG et MP3.

Ce code fonctionne aussi : vous pouvez donc aussi le copier/coller directement, pour le tester :

<audio controls>
  <source src="https://lasonotheque.org/UPLOAD/mp3/1890.ogg" type="audio/ogg">
  <source src="https://lasonotheque.org/UPLOAD/mp3/1890.mp3" type="audio/mpeg">
  Votre navigateur ne prend pas en charge l'audio HTML5. Voici un <a href="https://lasonotheque.org/UPLOAD/mp3/1890.mp3">lien vers le fichier audio</a> à la place.
</audio>

Ce code donne le résultat suivant :

Les attributs

Des options peuvent également être ajoutés dans les attributs. Voici la première ligne, un début de balise plus complet, le reste du code restant inchangé au dernier exemple :

<audio controls autoplay loop preload="none">

- "autoplay" : permet de lancer le son automatiquement au chargement de la page.
- "loop" : lance le son en boucle.
- preload="none" : Lorsque cet attributs est réglé sur "none", le son ne se précharge pas. "metadata" : Indique que seules les méta-données (comme la durée) sont préchargées. "auto" indique que tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira...

Tous ces attributs peuvent être absents, même "controls". Dans ce cas, le player n'est plus visible, mais il pourrait être controlé en Javascript ou bien lire un contenu en auto et/ou en boucles si les attributs correspondants sont présents.

Autres formats

L'OGG et le MP3 sont des grands classiques, mais il est possible d'ajouter d'autres formats, par exemple le Wav :

  <source src="https://lasonotheque.org/UPLOAD/mp3/1890.wav" type="audio/wav">

Conclusion

L'ajout d'un fichier sonore est facile avec cette balise. N'hésitez pas à copier mon premier code et à essayer quelques petits attributs. Et contactez-moi si vous avez la moindre question.

♥ - Joseph SARDIN - Fondateur et Sonothécaire de BigSoundBank.com et LaSonotheque.org - Contact