It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

HTML audio Tag

Reading time 2 min
Published Mar 19, 2019
Updated Oct 1, 2019

HTML audio Tag: Main Tips

  • The HTML <audio> element embeds sound content into web pages.
  • The closing tag for the HTML <audio> tag has to be included.
  • It is possible to list multiple sources of the sound content to guarantee that the audio works for the majority of visitors.

Use of audio

The HTML <audio> element adds audio content to web pages.

Remember: the HTML <audio> tag supports the following file formats - mp3, wav and ogg.

Example
<audio controls>
<source src="bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3" type="audio/mpeg"">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

Note: the text inside the HTML audio tags will be visible only if the browser does not support the audio element.

Attributes for audio

autoplay

autoplay specifies whether the audio should play automatically after a web page loads.

Example
<audio controls autoplay>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

controls

HTML audio controls indicate whether the audio player should have control buttons (play, pause, volume, etc.).

Example
<audio controls>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

loop

loop specifies whether the audio will start over again after it ends.

Example
<audio controls loop>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

muted

muted indicates whether the audio should be muted after it loads.

Example
<audio controls muted>
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

preload

preload requires a specific preload behavior from the browser. Possible values are the following:

  • none specifies that the audio should not be preloaded.
  • metadata specifies that only the metadata (length) is retrieved.
  • auto specifies that the audio can be downloaded.
Example
<audio controls preload="none">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" type="audio/mpeg">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.wav?raw=true" type="audio/wav">
<source src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.ogg?raw=true" type="audio/ogg">
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

src

src indicates the URL source of the audio file.

Example
<audio src="https://cdn.bitdegree.org/learn/I_Cactus_-_05_-_ruby_cactus.mp3?raw=true" controls>
<p>If audio does not start, the <audio> HTML element is not supported in your browser.</p>
</audio>

Browser support

Browser image
Chrome
3+
Browser image
Edge
All
Browser image
Firefox
3.5+
Browser image
IE
9+
Browser image
Opera
10.5+
Browser image
Safari
3.1+

Mobile browser support

Browser image
Chrome
18+
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All