ELI5: HTML5 Audio Tag
I know w3schools goes over the basics of embedding mp3s in HTML5, but I was still really confused with the tag. I did a bit more research and thought I would synthesize my discoveries here.
Before HTML5, embedding mp3s required using third-party plugins (like Adobe Flash, Quicktime, Y!, etc.) Those are a pain in the neck sometimes. Browsers were really picky with what plugin they were willing to work with. So HTML5 created its own player with the <audio> tag.
Here are the attributes to the <audio> tag
- autoplay – boolean attribute (i.e., the attribute is true when it is present and false when it isn’t), autoplay specifies that the file should play as soon as it can
- loop – boolean attribute, file will be continuously player
- controls – boolean attribute, tells browser to display a default audio player
- src – defines location of the audio source. There are two types of sources for MP3s:
- Absolute URLs points to an MP3 on another website (src =”http://msvalerieparkdistro.com/site/assets/files/12681/upside_drown-_how_does_he_speak.mp3″)
- Relative URLs points to a location within a site (src= “howdoeshespeak.mp3”). These refer to files located within the site folder. Dreamweaver will prompt you to browse for the MP3 or OGG on your computer and ask you to save it in your site folder. Thus you have created a relative URL.
The tag looks like this:
<audio autoplay=”autoplay” controls=”controls” loop=”loop”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<p> Your browser will not play this file, so <a href=”file.mp3″>download it here.</a>
The browser will search your <audio> tag for a file extension to play audio. But unfortunately, all browsers aren’t created equally. Some prefer to read the .MP3 extension and some prefer to read the .OGG extension. It is best to have both extensions at the browser’s disposal. If the browser doesn’t support the extension, the text in the <p> tag will appear with a link to the actual MP3.
What is an MP3 in comparison to OGG?
- MP3 was created by the Moving Pictures Expert Group
- Moving Pictures Expert Group is a proprietary group that can charge royalties for any software or file that uses the MP3 format
- MP3 is the most common and most compatible music format
- MP3 sound quality is 128kbps (kilobits per second of data transfer speed)
- Firefox and Opera do not support MP3
- OGG was created by OGG Vorbis
- OGG Vorbis is a free and open source code base
- OGG has superior sound quality at 192kbps (again, kilobits per second of data transfer speed)
- Internet Explorer and Safari don’t support OGG
- Hint: You can convert your MP3s into OGGs at MediaConverter.org
Wah-lah! Now you can have a soundtrack to your website!
– Caily Grube