HTML: Adding an Audio Player to your web page

Good day dear reader and web development enthusiast. In this tutorial I am going to show you how to add an audio player to your web page. To execute this function, we shall be making use of the HTML audio tag — Cool isn't it?

First off, I'd like to believe you have seen the tutorial on Introduction to CSS which was released earlier today and that you are indeed familiar with HyperText
Markup Language (HTML) , some would refer to it as How To Meet Ladies :-D

Anyhoo, just like I mentioned earlier, the audio tag does the trick of having a web page with an audio player embedded in it. Now the question is how to implement that in your web page. But first let us see how the audio tag works.

HOW THE AUDIO TAG WORKS

The syntax for adding an audio player to your web page is as follows:

Having seen the syntax for adding an audio player to your web page, let us see the implementation, shall we?

I bet you now see the player (the section of the page with the play button like you find in your music players like VLC Media Player and the likes of 'em).

Let me explain how audio element works.

• The controls attribute adds controls like Play, Pause and Volume to the audio player.
• The text between the opening and closing tag of the audio element will be displayed on devices that cannot display the audio player (or browsers that does not support the audio element).
• Including multiple source elements can lead to different file extensions and so the browser selects which one is available first and plays it.

Audio player Supported media types

File Format	Media Type
mp3	audio/mpeg
ogg	audio/ogg
wav	audio/wav

The table above shows the audio file extensions supported by the Audio player. Meaning if any music file you want to add to your player should have a name like this: Osinachi.mp3, Igwe.ogg, myRecording100.wav.

I hope you got a good grab of this.

If you have any question(s), do not hesitate to drop them in the comment box below. I'd be delighted to respond to your questions.

You can also read this article on JavaScript Functions.

Have a fulfilled day!