How to put an audio in HTML?

Hello Friends,

You are welcome to our HTML series

In the last segment, we learned about events related to the mouse and the keyboard.

The key up, keypress and key down events of the keyboard and there were so many events of the mouse such as click, double click, mouse over, mouse out, mouse up etc.

So, we learned about all these events.

I hope that you have tried and performed the practical of all these events.

If you were able to run them properly it's really well and good and if you faced any difficulty in running that you can let us know at forum.learnvern.com, we will resolve your issues and try to revert as soon as possible.

Today's segment is related to the HTML audio tag.

In HTML 5, so many useful tags like audio, video, canvas were made available through which we can add graphics and multimedia to the webpage.

We will learn about graphics and multimedia in the sections we will go through next.

Among them, the first tag is the Audio tag.

If we look into the audio tag it was introduced in HTML 5 and with the help of the audio tag, we can add sounds to our web pages such as music or audio clip.

Usually, the audio tag supports all formats like MP3, MP4, m4a, wav, ogg.

Also, there are other formats that the audio tag supports, but a few audio formats like wmg etc, are not supported by the audio tag.

So, there are certain formats that are supported but a few new formats are there which are not supported.

But still, there is a functionality through which we can include the audio in the web page if it's supported.

Usually, HTML 5 supports videos and audios with controls and these controls are brought through the technologies like flash, silver light etc, that means they develop these and we play them on our web page.

This means, these companies like flash and silver light developed these functionalities of audios and we add these to our web page from there.

So, HTML 5 is now supporting the audio tag.

Now, we will see with an example how we can include the audio tag on the web page.

Here, the audio tag is given in the example

After writing audio we have written controls after that it is the source and we have added the source and typed in it.

Here a message is written in case the audio is not supported.

After that, we closed the audio tag.

Let's do this in a practical way,

So let's say I want to create an HTML program so here I will set HTML.

Type HTML

Control space

Audio...example

Save

Now, here audio underscore (_) example

Save as

Okay, the html page is created

We have given it the name “audio example” and saved it with the same name.

Now, we have to include the audio here.

First of all, I will take an H1 tag here

"Below file is an audio file"

Save

..

Now we will run it

Okay,

"Below file is an audio file" is shown and H1 is printed here.

Now, we have to include an audio tag here

So let's say I write audio here.

The audio tag is generated to include audio.

So in the example, we saw two things: one is the control and the second is the source.

Firstly, we will include the source.

The source will be an audio file that is stored in a folder, so let's go to the folder.

The file named audio file which is in M4A format is stored in the folder where all the examples of the programs are saved.

So here in the type, I will first write audio as written here

Audio slash (/) and after that M4A will come.

Okay

Save

So, in the type, we mention the type of the audio if.

Here, in type m4a will be written, if the audio file is in MP3 format I will type MP3 here and if it is any other format I will type that here.

So, currently, it is m4a that is why I have typed m4a.

The name is the audio file.

Let's say I give the name here

Audio..file, we will check capitals and small this is capital A and capital F.

So, capital A and capital F.

Okay

Save

After saving it, I am running it.

While I run it no file is seen here, the audio file has been generated but that is not shown, why?

Because I have not enabled the controls, it is important to enable the controls as they help us to play and pause and to show up.

So let's say if I add audio controls

Save

And Reload.

The moment I reloaded after adding the controls, a control is shown here.

Inside the control, there is a play button of the file, after that the timer that shows how long the file is, we can see a progress bar through which we can see how much file has run, and after that, it is the voice through which I can stop and play the voice.

Currently, this is not working as I am clicking here and it's in invisible mode and not playing so what can be done for that.

Let's go to our program.

Inside the program, you can see two things are incorrectly mentioned in which the first is that we didn't give the audio file the extension of m4a,

And the second very most important thing is: we have given m4a here because the audio format is m4a but this type explains the supportable version that means in which format I want to run the audio file.

Because as we saw in the example that it supports formats like MP3, wav and ogg so that is why I have to write MP3 instead of m4a in the program.

I am explaining the same again,

When we include an audio file, in that case, we write the name of the file here in which we have mentioned the extension,

But when I mention any type in which format I want to run the audio file, the HTML supports formats like MP3, wav and ogg while executing the audio file.

So, in that case, I will have to add MP3 here, the moment I will add MP3 here and reload the program you can see the control is enabled, earlier it was in a disabled state.

Let me show you again

When I wrote m4a

Save reload

The controls come in a disabled state.

I am doing the same with mp3

Save and reload

The controls get activated once reloaded.

Now, if I click the file it will play

Let me play the file

(21 secs gap)

So as you saw when I played the file it is running in Audio format and through the speaker, we can listen to it.

So, that was the audio tag that is introduced in HTML, it is a very useful tag but we have to ensure a few things when we include it in our web page such as:

It is mandatory to write controls after the audio if we don't write them the controls will not be enabled.

It is important to mention the name of the source file name, and it is important to include the proper path for the file where it is saved.

And along with that, the type indicates in which format they will be going to run and if we have included an incorrect format the file will not run and audio will not be heard.

If we have included audio slash MP3, audio slash wav or audio slash ogg the audio will be heard in a proper format.

So that was all about the audio tag.

In the next segment, we are going to learn about the video tags, videos are also the same, only a few differences are there.

Regarding the audio tag, I would request you to download any clip of audio or if you have any existing one and add it inside the source try & run and it in your system at home.

And perform the practical yourself.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

The next segment will be the video-tag

Till then thank you, guys.