- Html Play Audio On Image Click Check
- Html Play Audio On Image Click Test
- Html Play Audio On Image Click Button
- Html Play Audio On Image Click
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. In this example we will demonstrate how to play a 'click' sound when a link or other element is clicked in HTML pages. A sample code for jQueryMobile is also provided. An MP3 audio file is used play the actual sound. You have to have jQuery in your page for this to work. Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary. Muted Causes the media to play with the sound turned off by default. Poster The URL of an image which will be displayed before the video is played. It is intended to be used for a splash screen or advertising screen. Audio controls autoplay Your browser does not support the audio element.
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 browsermay 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 fileswith 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.
Your browser does not support the audio tag.
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 havingno 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 locatedin 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 browserdoes 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 createa 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
Let's have something fun to start with. We are now talking about web browser supportingaudio file in native, just like how <img> tag is supported since 1994.HTML5 is likely to put an end to audio plug-in such as Microsoft Windows Media player, Microsoft Silverlight, Apple QuickTimeand the infamous Adobe Flash.
If you don't see a audio player control in the dotted box above, your web browser probably don't supportthe audio tag.
Above is a gallery of audio players by major web browsers. As you can see the sizeof the player control varies from one to another, IE9 player is exceptionally large in compared toSafari player. This can be a disaster to a web designer.
If you are using Safari for Windows but without QuickTime, your Safariis not going to support media tag (both <audio> and <video>) in 'native'.I suppose Safari is relying on QuickTime codec to play media file in the browser.
How to?
In order to make your web page plays music, the html code can be as simple as
<audio src='vincent.mp3' controls> </audio>
Unfortunately, the most popular audio format MPEG3(.mp3) is not an Open standard, it is patent encumbered.That means, web browser needs to pay a sum of money in order to decode it, and that might not befinancially feasible for smaller company or organization. As you can see from table below, onlythose big boys are rich enough to decode MP3. Firefox and Opera supports only Vorbis (.ogg) formatwhich is an Open standard.
On the other hand, the open standard Vorbis (*.ogg) is not supported by Safari and IE9. Hence, it isalways good to have both Mp3 and Ogg side to side available.
| Browser | .mp3 | .wav | .ogg |
|---|---|---|---|
| Mozzila Firefox 3.6 | ✓ | ✓ | |
| Opera 10.63 | ✓ | ✓ | |
| Google Chrome 8.0 | ✓ | ✓ | ✓ |
| Apple Safari 5.0.3 (with QuickTime) | ✓ | ✓ | |
| Microsoft IE 9 Beta | ✓ | ✓ |
Test how far your browser support audio tag using 'HTML5 <audio> and Audio() Support Tester'.
What you can do is ...
Whether or not to provide the MIME type (type='audio/mpeg') to browser is optional. Most modern web browsers aresmart enough to determine the content type by itself. However, it is always good to be helpful to web browser, thatmakes your web browser works faster and happier.
Attributes of <audio>
| Attribute | Value | Description |
|---|---|---|
| controls | *Boolean attribute | You need this to make the native audio player appear. Otherwise, you would haveto use DOM to control the audio element to play your music. |
| autoplay | *Boolean attribute | If this guy exists, the browser will just play your song or your speech without asking permission from your visitor. |
| loop | *Boolean attribute | Keep repeating your music |
| src | url | The URL of your audio file |
| preload | none | metadata | auto | This attribute was formerly known as 'autobuffer' and it was an boolean attribute as 'controls'. none - do not buffer audio file automatically. metadata - only buffer the metadata of audio file. auto - buffer audio file before it gets played. |
*Boolean attribute is an attribute that either present in the tag or not present. A Boolean attribute has just its name and no value.You can put it this way too, whatever value you assign to a boolean attribute means only one thing - TRUE.
<audio src='vincent.mp3' controls='true' loop='true' autoplay='true'></audio>
(This is completely unneccessary!)
Html Play Audio On Image Click Check
<audio src='vincent.mp3' controls loop autoplay></audio>
(This is it!)
How should we cater for less modern web browser?
HTML5 is a evolution of the web, not a revolution that will totally destroy the past. Hence, let'smove forward a little bit gracefully.
Html Play Audio On Image Click Test
In order to support web browser that doesn't understand what <audio> is about, such as IE8 and below, we shalllet them enjoy their good old day using <object> tag.
In my example above, I am using a flash mp3 player from PremiumBeat.com
If your browser doesn't suppport HTML5 but you have got flash plug-in, you probably don't want to miss the fun. Here you go ...
Html Play Audio On Image Click Button
Download this lovely song and wish you all the best!Html Play Audio On Image Click
If the web browser support neither HTML5 nor Flash, you might as well let the user download the audio file and wish them luck ongetting a player to play it.
Instead of using the standard web browser audio player, you can write your own control, use your creativity and imagination, the sky is the limit.