En HTML, il est possible d'intégrer du contenu audio et vidéo directement dans les pages web à l'aide des balises <audio> et <video>, respectivement. Commençons par l'intégration de l'audio :

Intégration de l'audio

La balise <audio> permet d'intégrer du contenu audio dans un document HTML. Elle offre la possibilité de lire des fichiers audio directement dans le navigateur.

Attributs audio

• controls : Ajoute des contrôles audio standards, tels que lecture, pause et réglage du volume, au lecteur ;
• autoplay : Indique si l'audio doit commencer à jouer automatiquement lors du chargement de la page ;
• loop : Indique si l'audio doit être lu en boucle en continu.

Exemple :

<audio controls autoplay loop>
  <!-- Some other tags -->
</audio>

Vous avez peut-être remarqué que nous avons seulement spécifié les caractéristiques du lecteur audio, mais nous n'avons pas mentionné d'où provient l'audio. Nous avons besoin de la balise <source>.

Source

La balise <source> est utilisée à l'intérieur de la balise <audio> pour spécifier l'URL du fichier audio et ses attributs. Nous pouvons utiliser l'attribut src pour indiquer l'URL du fichier audio et l'attribut type pour préciser le type MIME du fichier audio.
Exemple :

<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

Dans l'exemple ci-dessus :

• La balise <audio> inclut des attributs tels que controls, autoplay et loop ;
• Les balises <source> spécifient les URL sources des fichiers audio ainsi que leurs types MIME ;
• Si le navigateur ne prend pas en charge la balise <audio> ou les formats audio spécifiés, le texte alternatif Your browser does not support the audio element. s’affiche.

Tutoriel vidéo