How to Play an Audio File Using HTML
In this article, we show how to play an audio file on a website using just HTML.
And this is done through the HTML <audio></audio> tag.
The audio tag used in HTML is relatively new. It hasn't been around forever. In fact, prior to this tag created with HTML5, HTML could not be used to play audio. Instead, an audio player would have to be used. Now, with HTML5, with the audio tag, audio files can be played with HTML.
The browsers that support the rendering of the HTML5 audio tag are Chrome 4.0, Internet Explorer 9.0, Firefox 3.5, Safari 4.0, and Opera 10.5. If you are using any of these respective browsers prior to these editions, the browser may be unable to render the audio file using the audio tag. So keep this in mind if you are using an older browser.
Also realize that the audio tag only supports and can display mp3, wav, or ogg file formats. This means that only audio files with the .mp3, .wav, and .ogg file extensions can be displayed. All other file formats will not work with the HTML audio tag.
So below is an example of an audio file displayed through the HTML <audio> tag. The video is an mp3 audio file.
So this sound file above, you can see, works pretty well.
HTML Code
The HTML code to display the audio file above is shown below.
So you can see the code above.
In the video tag, we specify controls; this means we want controls to be displayed on the audio file such as play/pause, volume, etc. It give the user more options and most of the times is preferred over having no controls. When there are no controls, the user cannot stop the sound file in any way other than to leave your site. Therefore, you should almost certainly put controls on your audio.
We then specify the source of the audio file, which is the complete pathway to the audio file. Since our video is located in the same directory that we are currently in (Articles directory), the src is simply the file name.
We specify the type of audio file used with the type attribute set to video/the type of file extension the file is.
We put the line, "Your browser does not support the audio tag" in between the audio tags. In case the browser does not support the audio tags, as explained above with older browsers, this line will be displayed, telling the user.
And this really all that is required to play an audio file using HTML.
AutoPlay Feature
One modification we can make to the code shown above is autoplay.
Maybe sometimes you want the audio file to play automatically once the page uploads.
HTML Code
To do this, the HTML code is shown below.
So basically the code is exactly the same, but now we've added autoplay.
This video will now be displayed automatically once the page is loaded.
Just to create a more dynamic environment, if you couple HTML with a server side language like PHP, we can create a dynamic video upload form, that can play a video once uploaded.
See the upload form below.
This audio file uploader accepts audio files with the file extensions mp4, wav, and ogg.
Audio File Uploader
So this goes to show you that HTML can display and play audio files at a very high quality level. And using a server
language, you can do even more dynamic things such as upload audio files to your website and play them back.
Related Resources
How to Create an Audio File Search Engine For Your Website Using PHP
How to Display a Video Using HTML
How to Upload Videos to a Website Using PHP
How to Insert Videos into a MySQL Database Using PHP
How to Create a Video Search Engine For Your Website Using PHP
How to Create Your Own File Transfer Protocol (FTP) For Your Website Using PHP
How to Upload Images to a Website Using PHP
How to Upload Files to a Website Using PHP
How to Insert Images into a MySQL Database Using PHP