HTML - Audio Element

HTML <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.

Syntax

<audio controls>
   <source src= "link/to/audio/file" 
            type = "audio/mp3" />
</audio>

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.

Examples of HTML Audio Element

Here are some examples that illustrate how to use audio element in HTML.

Embed a Audio in HTML page

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>

Autoplay and Looping of Audio in HTML

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.

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	MP3
Chrome	Yes	Yes	Yes
Edge	Yes	Yes	Yes
Safari	No	Yes	Yes
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes

Print Page