HTML - Audio Element

The <audio> element in HTML

The <audio> element is used to enable the support of audio file within a web page. We can include multiple sources of audio, however, the browser will choose the most appropriate file automatically. Most of the attributes of <video> element is also compatible with the <audio> element. The most frequently used attributes of HTML audio element are controls, autoplay, loop, muted and src.

How to embed an audio in HTML?

Like video, audio player is also embedded inside a web page either by setting the src attribute or by including <source> tag within the audio element. The src attribute and source tag specifies the path or URL for audio. The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. Therefore, it is also possible to supply all these formats by using multiple <source> tag within <audio> element. We let the browser decide which format is more suitable for audio playback.

It is necessary to use the controls attribute so that users can manage audio playback functions such as volume adjustment, forward or backwards navigation and play or pause operations.

Example

The following example shows how to embed an audio in a web page −

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

The autoplay and looping of audio

We can also configure the audio to play automatically in a loop by using the autoplay and loop attributes. Remember, the Chrome browser does not support autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.

The autoplay is a Boolean attribute that is used to play the audio automatically once the page is loaded. If loop attribute is present on the <audio> element, the audio sound will automatically rewind to the beginning once the end of audio is reached.

Example

The following example illustrates the autoplay and looping of audio −

<!DOCTYPE html>
<html>
<body>
   <p>Working with audio element</p>
   <audio controls autoplay muted loop>
      <source src= "/html/media/audio/sample_3sec_audio.mp3" type = "audio/mp3" />
      <source src= "/html/media/audio/sample_3sec_audio.wav" type = "audio/wav" />
      <source src= "/html/media/audio/sample_3sec_audio.ogg" type = "audio/ogg" />
      Your browser does not support the <audio> element.
   </audio>
</body>
</html>

Browser Support for different Audio Formats

The table below illustrates the various audio formats that are supported by different browsers −

Browser OGG WAV MP4
Chrome Yes Yes Yes
Edge Yes Yes Yes
Safari No Yes Yes
Firefox Yes Yes Yes
Opera Yes Yes Yes
Advertisements