Audio in HTML

Adding audio elements to your web pages can significantly enhance user engagement. It creates a multisensory experience, appealing not only to visual learners but also to those who prefer auditory information. Users with visual impairments or those who prefer listening over reading can discover your website to be more beneficial with the inclusion of audio. HTML provides a dedicated <audio> element for embedding audio files.

Here's a basic example of the <audio> element:

<audio controls>
   <source src="audio-file.mp3" type="audio/mp3">
   Your browser does not support the audio element.
</audio>
  • The controls attribute adds play, pause, and volume controls.
  • The <source> element specifies the audio file and its type.

Supported Audio Formats

Different browsers support different audio formats. To ensure compatibility, include multiple <source> elements with various formats. For example:

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

It's good practice to provide alternative content within the <audio> element. This ensures that users with browsers that don't support audio can still access relevant information.