How To Embed An Audio File With HTML5
Making a playable audio player used to mean you had to embed a Flash player or a Quicktime file into your website. Luckily, now there is a way to add a simple HTML5 code that will not only play the audio file, but will create a player that the user can control. You will want to use HTML5 over Flash because many of your readers will be using a mobile device, and not all mobile devices are flash-enabled. We will, however, create a Flash player as our fallback in case a browser cannot handle HTML5 in this tutorial. You can also use a Quicktime file as the fallback, but keep in mind you will have to convert the file to an .mov.
The HTML5 audio and video tags make embedding files easy, and eliminates the need for the embed and object tags. As easy as they are, however, they have a few quirks that we need to fix. Some browsers, like Firefox, can’t play .mp3 files through the player. However, Firefox can play .ogg files, which browsers like Google Chrome cannot play through the HTML5 audio tag. We’ll need to upload and embed both of these files. The browser will only display the audio file it can play, so there’s no need to worry about having two audio players in your post.
Here is the final code that we will be using. This will include 2 versions of the audio files (mp3 and ogg), as well as a flash player as the fallback for browsers or devices that can’t handle HTML5.
<audio controls="controls"> <source src="yourURL.mp3" /> <source src="yourURL.ogg" /> <!-- fallback --> <embed type="application/x-shockwave-flash" flashvars="audioUrl=yourURL.mp3" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="650? height="0? quality="best"></embed> </audio>
If you prefer, you can simply add text as the fallback. Here is what this code will look like.
<audio controls="controls"> <source src="yourURL.mp3" /> <source src="yourURL.ogg" /> <!-- fallback --> Your browser cannot handle HTML5. </audio>
*Note: It is STRONGLY recommended that you use the Flash player as the fallback
HTML5 removes the need for extra, optional elements inside the actual code. HTML5 basically allows a browser to not have to rely on extra information in order to render the same content on a screen. It, by its very nature, will intuitively know what should be shown on the screen by a much smaller and concise amount of code. Hence if u learn Html5
it will reduce the amount of time spent on a project
Maybe I missed it, but is there a way to resize the player?
Thanks!
Dave
Dave Waters,
To change the size, you need to add style=”width:###px” after where it says controls=”controls” and before the end bracket (>). Put in the # of pixels you want to make the size – you might have to play around with it.
Your first audio tag would look something like (bracket)audio controls=”controls” style=”width:##px”(bracket)
(Put in the where it says bracket).
Hope that helps! I may reupload the video to include this info in there, thanks for the question.
That did it. Thanks!
D
Whenever i try to open my? page with multiple audio players they automatically load even without pressing the play button. How can i stop them to load simultaneously? Thanks in advance.
Here is the site Sir. Thanks.
http://bscofc.org/sermon-mp3/
Daniel,
Try adding param name=”autoplay” value=”false” before the closing audio tag on each audio file. That might keep them from automatically playing. It would look something like this:
(bracket)param name=”autoplay” value=”false” /(bracket) (bracket)/audio(bracket)
Let me know if that works!
– Max
I’ ve been looking all day for something that is coded simple and would play ogg.
Thanks.
It works brilliantly everywhere but in Firefox it appears for a second and then disappears completely! Any ideas? I’m running FF 6.
@Brian Riback ,
You may want to update your Firefox to the latest version and see if that works.
– Max
want my player to autostart how do you do that. And how do I move it. IT’s to close to my footer
@chris
Try adding param name=”autoplay” value=”true” before the closing audio tag on the audio file.
As for the location of the audio player, it depends on what you are using (WordPress, Dreamweaver, etc). You may have to copy and paste the code somewhere else to get it where you want it.
– Max
Hi,
It works great on chrome and firefox, but internet explorer doesn’t take it, nor does safari.
any ideas on how to cover that problem?
Thank you
ok and how to put the link from my website on moonfruit??i have a song there and want to put the link here so it can work on my website but cannot get it to work
cant get it to auto play i tried the
and I cant get it to go where i want it to
@Hi- the code strips out in comments- so I don’t know what you did. If you replace the < or the [ with something like the word brackets- we can see what you did.