Télécharger le PDF du cours
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 :
| Navigateur | Vorbis | MP3 | PCM (WAVE) |
|---|---|---|---|
| Chrome | Supporté | Supporté | Supporté |
| Safari | Non supporté | Supporté | Supporté |
| Firefox | Supporté | Supporté | Supporté |
| Edge | Supporté | Supporté | Supporté |
| Opera | Supporté | Supporté | Supporté | Safari (iOS) | Non supporté | Supporté | Supporté | Android | Supporté | 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.
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.
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
preloadpermet 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
autoplayva 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
looppermet 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
mutedsert à définir si le son doit être initialement coupé. Il suffit de le renseigner (même sans valeur explicite) pour couper le son.
