Embedding Audio In Html

Hi!! How are you doing!! Welcome to flower brackets blog. In this post we will be checking out a very interesting feature of html and that is to embedding audio in html.

Example : embedding audio in html

The html file that I have here is very simple

<!DOCTYPE html>
<title>Embedding Audio In Html</title>
<h2>Here's an audio playing!!</h2>
<audio controls>
<source src = "michael.mp3" type = "audio/mpeg" />
<p>Warning!! Browser does not support this file</p>

Inside the body section I have the heading of the page first. In between the opening and closing <h2> tags I have the text “Here’s an audio playing!!”.

Then I have the audio element with the attribute “controls” and this attribute does not take any value.

I will let you know what is the significance of the controls attribute in a short while.

Well, then I have another element that goes along with the audio element. So you have to keep the audio element first and within it include the “source” element or “source” tag.

As I said this has to be within it. You are going to close your audio element after you close your source element.

And the source element is used to tell the browser where the file is kept and what the type of the file is.

So you tell the name of the file and the extension through the “src” attribute.

You type in “src” the name of the attribute then equal to symbol and then within double quotes as value to it.

Now pass in the name of the file along with the extension. The file name that I am going to use is “michael.mp3”.

Also Read – Learn Email Links In Html

This is in the same folder as the above html file. So I have these two file in a folder that I have on my desktop.

And then the source element also requires you to include the “type” attribute and the “type” attribute takes the format of the file.

If it’s an audio mpeg file, then that’s what you have to include above within double quotes.

Also I have a paragraph of text. I have the opening and closing <p> tags and the text that’s enclosed is “Warning!! Browser does not support this file”.

This text will be displayed only if your web browser is unable to play audio file for some reason.

This is how the file looks when I open it in google chrome.

Embedding Audio In Html

You can play the song in your laptop or desktop. You can seek forward and backward if you want to.

You can adjust the volume, pause it and play it. So these controls are sufficient.

I mean if you have an audio clip on a website you know what more can you ask for.

Let’s talk about control attribute which I had mentioned earlier in this post.

Now let’s say I remove control attribute of audio element in the above html document. I will save the file and go back to chrome and I refresh my page,

Embedding Audio In Html

And I see now that all the controls that I was just talking about are gone now. So this is the significance of the controls attribute.

It helps you have the play pause buttons and then it helps you adjust the volume and obviously you can seek forward or backward.


So that’s it for this post. I hope you have understood how to embed audio element in html.

You can subscribe to my blog flower brackets and share this post across social networks.

Related Posts