Insérer de la musique avec l’élément HTML audio

Nous allons pouvoir intégrer un contenu audio dans un document avec l’élément audio. Dans cette nouvelle leçon, nous allons apprendre à l’utiliser et découvrir les subtilités des formats de codec audio.

 

Les formats audio et leur support

Il existe différents formats de fichiers audio de la même façon qu’on a pu voir précédemment qu’il existait différents formats d’image.

Jusqu’à très récemment, toutefois, l’insertion de fichiers audio était beaucoup plus complexe que l’insertion d’images pour la raison qu’aucun format de fichier audio n’était universellement reconnu : chaque navigateur possédait sa liste de formats audio qu’il était capable de lire.

La raison ici était une question de brevets déposés sur des éléments servant à constituer les différents formats audio ou sur les formats audio en soi, comme le brevet sur le MP3 effectif jusqu’en 2017. Ainsi, les navigateurs étaient soit obligés de posséder des licences soit de payer des royalties pour pouvoir utiliser tel ou tel format audio.

La situation s’est récemment beaucoup améliorée sur ce point-là et aujourd’hui certains formats audio sont bien reconnus par la plupart des navigateurs.

Cependant, comme certains problèmes peuvent toujours subsister, je vais vous montrer dans ce cours la méthode « historique » d’insertion d’audio qui consiste à contourner le problème en proposant plusieurs fichiers audio source de différents formats afin que chaque navigateur puisse choisir celui qui lui convient.

Les formats audio les plus courants généralement utilisés vont être les suivants :

  • Le format audio Vorbis du conteneur WebM audio/webm ;
  • Le format audio Vorbis du conteneur Ogg audio/ogg ;
  • Le format audio MP3 audio/mpeg ;
  • Le format audio PCM du conteneur WAVE audio/wave.

Pour information, voici les supports de ces différents formats par les navigateurs les plus utilisés dans leur version la plus récente :

NavigateurVorbisMP3PCM (WAVE)
ChromeSupportéSupportéSupporté
SafariNon supportéSupportéSupporté
FirefoxSupportéSupportéSupporté
EdgeSupportéSupportéSupporté
OperaSupportéSupportéSupporté
Safari (iOS)Non supportéSupportéSupporté
AndroidSupportéSupportéSupporté
Chrome (Android)SupportéSupportéSupporté

 

Insérer de l’audio dans un fichier HTML

Pour pouvoir insérer de l’audio dans nos pages, nous allons déjà devoir nous munir d’une piste audio qui devra être enregistrée sous différents formats.

Pour ma part, je vais utiliser un fichier audio qui s’appelle « perfect-time » et qui a été enregistré sous trois formats différents : mp3, ogg et wav.

Vous pouvez télécharger ces trois versions de fichier en cliquant ici. Je vous invite à placer ces fichiers dans le même dossier que vos fichiers de code.

La façon la plus simple d’insérer un fichier audio dans un fichier va être d’utiliser un élément audio avec deux attributs src et controls.

L’attribut src va indiquer le chemin vers la ressource à intégrer tandis que l’attribut controls va permettre de faire apparaitre les contrôles fournis par le navigateur (notamment un bouton de lecture / arrêt, un bouton pour choisir le niveau sonore, etc.).

Nous allons également renseigner un texte dans l’élément audio qui pourra être affiché dans certains anciennes versions de navigateurs dans le cas où le navigateur ne pourrait pas lire le fichier audio fourni.

Utilisation d'un élément HTML audio pour insérer de la musique dans nos pages

Insertion de musique dans nos pages web avec HTML audio

Le problème en utilisant l’élément audio de cette manière est qu’on ne va pas pouvoir fournir de format audio alternatif au cas où le navigateur ne puisse pas lire le format fourni.

Nous utiliserons donc généralement plutôt l’élément audio de concert avec des éléments source qui vont nous permettre d’intégrer différents fichiers parmi lesquels le navigateur fera son choix.

Dans l’élément source, nous allons préciser l’emplacement du fichier audio dans un attribut src et allons également facultativement pouvoir ajouter un attribut type qui va nous permettre d’indiquer rapidement au navigateur le type de codec audio utilisé dans notre fichier pour que le navigateur sache immédiatement s’il peut le lire ou pas sans même avoir à le tester. Cela optimisera les performances de notre page.

On définit plusieurs formats de fichier audio avec audio et source en HTML

On utilise audio et source en HTML pour proposer plusieurs formats de fichier audio au navigateur

Ici, le navigateur va s’arrêter dès qu’il va rencontrer un format audio qu’il sait lire et ignorer les autres formats fournis en dessous. Cette technique permet de pouvoir lire un fichier audio sur (quasiment) tous les navigateurs.

 

Les attributs de l’élément audio

En plus de l’attribut controls qui est obligatoire pour des raisons évidentes d’ergonomie et d’accessibilité, nous allons pouvoir indiquer d’autres attributs facultatifs à notre élément audio qui vont nous permettre de mieux contrôler comment le fichier audio doit être lu.

Ces attributs sont les suivants :

preload
L’attribut preload permet d’indiquer au navigateur si le fichier doit être préchargé ou pas. On va pouvoir lui passer l’une des valeurs suivantes :

  • none : le fichier audio ne sera pas préchargé ;
  • metadata : seules les méta-données seront préchargées ;
  • auto : le fichier sera préchargé.
autoplay
L’attribut autoplay va nous permettre de lancer automatiquement la lecture du fichier audio dès qu’il sera chargé. Il suffit de le renseigner (même sans valeur explicite) pour que le fichier audio se lance automatiquement. Notez que certains navigateurs (dont Chrome) peuvent bloquer cet attribut car celui-ci est jugé mauvais pour vos visiteurs.
loop
L’attribut loop permet de lire le fichier audio en boucle. Il suffit donc de le renseigner (même sans valeur explicite) pour que le fichier soit lu en boucle.
muted
L’attribut muted sert à définir si le son doit être initialement coupé. Il suffit de le renseigner (même sans valeur explicite) pour couper le son.

On utilise les attributs de l'élément HTML audio pour personnaliser les options de lecture

Les attributs de l'élément audio définissent le comportement de lecture de notre fichier en HTML

Laisser un commentaire