Grâce à l’évolution du langage HTML, il est devenu plus simple d’utiliser un lecteur audio et vidéo. Sur HTML4, la balise utilisée était <object> et servait à introduire un contenu à exécuter sur le navigateur. Avec cette ancienne balise, un plugin incorporé au navigateur était chargé de lancer le contenu désiré. Depuis HTML5, l’intégration d’un fichier audio et vidéo est devenu plus simple. Nous allons vous montrer comment procéder à la lecture d’un fichier audio HTML5.
Sommaire
Lecture audio HTML5 : comment ça marche ?
Auparavant, l’insertion d’un fichier audio était plutôt compliquée. D’un côté, il fallait faire appel un plugin comme Flash. Ce dernier était chargé d’exécuter le contenu multimédia dans le navigateur. De l’autre côté, aucun format audio n’était universellement reconnu comme étant le format principal. Chaque navigateur détenait sa propre liste de formats audio qu’il était en mesure de lire.
Tout comme la création d’un lien HTML5, l’utilisation d’une balise permet la lecture d’un son. La balise audio HTML5 indique au navigateur qu’il doit ainsi lire un son. Les problèmes de compatibilité de lecture étaient un problème de taille, mais aujourd’hui, les dernières versions des navigateurs sont capables de lire la plupart des formats audio. La balise audio permet de lancer la lecture des trois formats de fichiers les plus utilisés : MP3, AAC et ogg.
Comment ajouter un fichier audio HTML5 ?
En utilisant la balise <audio>, vous parviendrez à ajouter un fichier audio HTML5 dans votre page web. Pour pouvoir ajouter des options de lecture, il existe plusieurs attributs qu’on pourra insérer. Bien évidemment, pour pouvoir insérer votre fichier audio, assurez-vous qu’il soit dans un des formats les plus utilisés.
Avec l’attribut src, vous allez indiquer l’URL du son. Votre fichier peut se trouver dans votre répertoire, dans votre domaine ou même dans un autre domaine.
Afin d’afficher les contrôles du lecteur audio, vous avez l’attribut controls. Cet attribut fera apparaitre les contrôles fournis par le navigateur. Ces commandes sont les boutons de lecture, de pause, l’avancée du son ainsi que le volume.
En utilisant l’attribut loop, votre son sera à nouveau lu par le lecteur dès que le fichier audio sera terminé. Si vous souhaitez la lecture automatique de votre son, utilisez l’attribut autoplay. En effet, dès que la page est affichée, l’élément audio est directement lu.
Si vous ajoutez l’attribut muted, le son sera initialement sans volume et il faudra l’activer sur le contrôle de volume.
Enfin, l’attribut preload permet de définir si le fichier doit être préchargé en même temps que la page ou non. Si cet élément est défini, l’audio est préchargé dès que la page s’ouvre et est prêt à être lu une fois le bouton play cliqué. Pour preload, vous pouvez ajouter des valeurs : metadata ou auto. La valeur metadata permet un préchargement des métadonnées du son. En ce qui concerne la valeur auto, le son est préchargé entièrement au chargement de la page.
Comment définir un fichier audio HTML5 ?
Voici des exemples de lignes de code utilisant la balise audio HTML5 permettant d’insérer un son dans une page.
<audio controls src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release.mp3">
</audio>
Ce bout de code permet d’insérer le son dans la page web, ce qui donne alors :
Si vous souhaitez utiliser l’attribut autoplay, le code sera tel que :
<audio controls src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release.mp3" autoplay>
</audio>Le fichier sera immédiatement lu dès que la page sera ouverte. Notez que certains navigateurs bloquent cet attribut pour des raisons d’expérience utilisateur. D’ailleurs, on ne mettra pas d’exemple sur l’autoplay.
En ce qui concerne loop, le code sera le suivant :
<audio controls src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release.mp3" loop>
</audio>La musique d’exemple sera en lecture en boucle dans ce cas, ce qui donne :
Si vous souhaitez couper le son initialement, vous devez utiliser l’attribut muted :
<audio controls src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release.mp3" muted>
</audio>Cela donnera ceci :
La compatibilité de lecture du format audio
Aujourd’hui, la plupart des navigateurs supportent tous les formats audio. Des anciennes versions de navigateur ne permettent pas la lecture d’un format spécifique. Afin de contourner ce problème de compatibilité, l’utilisation de la balise <source> est la solution.
Dans l’élément source, l’emplacement du son sera toujours dans l’attribut src. Pour résoudre le problème, il faudra alors avoir un son disponible sous trois formats : MP3, AAC et ogg. En ajoutant l’attribut type, le navigateur sera capable de choisir le son qu’il pourra lire. Cela permettra de lire le son sur tous les navigateurs.
La résolution de cette compatibilité se fera ainsi à l’aide de ce type de code :
<audio controls>
<source src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release_ogg.ogg" type="audio/ogg">
<source src="https://41mag.b-cdn.net/wp-content/uploads/2022/08/Alan-Walker-Fade-NCS-Release.mp3" type="audio/mpeg">
</audio>