Get DevWP - WordPress Development Theme

HTML5 Audio

The HTML5 <audio> element is the standard way to embed audio in a web page. In this article, you’ll learn how to embed audio into your HTML document. This is great for:

  • Podcasts
  • Audio Books
  • Music

Using the HTML5 audio Element

The audio element is somewhat new but it works in most of the modern web browsers. You can check what browsers support the <audio> tag with this website Can I Use

Checkout the example below.


<audio controls>
  <source src="audio/ES_Every_Battle_Hallman.wav" type="audio/wav">
  <source src="audio/ES_Every_Battle_Hallman.wav" type="audio/ogg">
  <source src="audio/ES_Every_Battle_Hallman.wav" type="audio/mpeg">
  Your browser does not support the HTML5 Audio element.
</audio>

Let’s break down the code above.

We start off with the opening <audio> tag that has the attribute controls. The controls attribute adds audio controls such as play, pause and volume.

Then we have the <source> tag which has the attribute and value of src="audio/ES_Every_Battle_Hallman.wav" type="audio/wav". That specifies the location of the audio file on the web server and the file type of wav.

You will also note the other file types that are supported such as ogg and mpeg.

Then we have the line that says Your browser does not support the HTML5 Audio element.. This will only be displayed if the browser doesn’t support the <audio> tag.

Finally we close off with the </audio>.

Alternative HTML5 Audio Syntax


<audio controls="controls" src="audio/ES_Every_Battle_Hallman.wav">
    Your browser does not support the HTML5 Audio element.
</audio>

In the above example, we place the source of the audio file directly inside the opening <audio> tag.

That’s how to use the audio tag in your HTML Document.



View Our Themes