- Html Play Audio On Image Click
- Html Play Audio On Image Click Button
- Html Play Audio On Image Click Check
The current HTML5 draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. 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. Learn how to quickly insert an audio file into your website using just 3 lines of HTML5 code.Code this live in your browser - no software needed - https://bi.
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!)
<audio src='vincent.mp3' controls loop autoplay></audio>
(This is it!)
Html Play Audio On Image Click
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.
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
Html Play Audio On Image Click Button
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 ...
Download this lovely song and wish you all the best!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.
Html Play Audio On Image Click Check
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.