Master HTML 5 #12: HTML5 Audio Tag

Prior to HTML5, when you added an audio or video file to your web page, you did so through a particular plugin like QuickTime or Flash or Flash Movie. But maybe not everyone that visits your web page has that particular plugin installed or updated on their browser. They would then be prompted to install or update the plugin on their browser. Now, not everyone would do this, and many would simply just move on to another website. HTML5 solves that issue with the use of the audio audio and video tag. This video will show you how to add an audio file to your HTML5 webpage. Now the current problem with adding audio to your HTML5 webpage is that some browsers are not recognizing all audio formats. The way things are at this time is that if you want the majority of your site visitors to hear your audio files, then you have to add more than one audio format so that the different browsers recognize and play your audio file. Now setting this up is not difficult at all as you'll soon see here in a second. The problem as I see it is that instead of having one MP3 audio file at say 2 megs, now I have to have additional audio formats at roughly the same size or even larger if I'm going to be using uncompressed files like the WAV file. Now if I use a lot of audio files because, well, maybe I do regular podcasts and those podcasts are 30 minutes or an hour or longer, then this will put a size increase in my online hosting costs. Now in this demonstration I have several different formats of the same audio file that I'm going to be using in making this HTML5 web page demo. Let's have a look. Now I've got the 3 different files here, they're all the same name but different formats. Here's the ever-popular MP3 and the size here is 296 kilobytes. Now these other 2 formats, the uncompressed WAV and the AIF, that's the Audio Interchange File format, Well, you can see they're a heck of a lot larger than the 296 kilobytes of the MP3. Now let's go ahead and open up my Komodo HTML editor and here is how the audio tag is set up. It's basically the audio tag, that's the opening bracket, the word audio, space, and then the attribute that brings in the controls onto the web page. You know, the pause and the play and the fast-forward controls. That's simply the attribute controls equal, open double quotes, controls, close double quotes, and then the closing bracket. That's all there is to it. And here we have the, the different source files. And I've got the MP3 set up first, then the WAV file set up second, and the AIF set up third. Now you may not need all 3 of these. Let me show you a few sites that might come in handy for you. Now the html5test.com site will keep you up to date on the different formats that the different browsers support. I mean all of them. For example, this is the Chrome browser, and if you were to bookmark this and use this on your different browsers— and by the way, if you're a web developer, you should have more than one browser installed on your computer. Frankly, I would suggest at least 4, the 4 big guys: Chrome, Firefox, Internet Explorer, and Safari. You may also want to include Opera in there, but that's totally up to you. Now just to give you an example, on Chrome, out of 500 total points, Chrome's getting 468. Not too shabby. You do the same test on Internet Explorer 9, you're going to get you 138 points I think it is. But that's beside the point. You can check all that stuff out on your own. But right here tells you the audio portion of this browser and the different formats that it does support, and in this case the one that it does not support. So Chrome's pretty cool. Right now it says A-OK on the MP3. You do the same thing on your Internet Explorer, on your Safari, and on your Firefox and you're not gonna find the same on all of those browsers. As a matter of fact, I think all of those will support MP3 except for Firefox. So since Firefox is a pretty popular browser, you're gonna want to provide your site visitors with some type of a format that that browser supports. So using this site to check those will work out great. A couple more sites for you to check into and possibly bookmark if you don't already have some type of software that converts one format to another is online-convert.com. And Zamzar. Both of these convert a lot of different formats to a lot of different other formats. In this case we're just talking audio formats. They both do pretty much the same thing, they're both free, and they both allow you to download the converted file. Zamzar is a little different in that they require you to insert your email address here. They will then email you the download link as soon as the conversion takes place. Online-convert.com, No, they do it all right here on the site and they provide you with a download link. And Online-Convert also allows you some additional customizations. Let me show you what I'm talking about. Let's say we want to convert our WAV file or MP3 file into an AIFF or an AAC file. Right here is where you upload the file that you want to convert, or you can put in the URL of that file, but you are also able to make some additional changes here depending depending upon the file type that you upload. Then click on convert file, and depending upon how large that file is that you uploaded would depend on how long it takes for that conversion process to take place. Then boom, you got your download link right there. Download it, you're good to go. So out of these 3 sites— Zamzar, online-convert.com, and html5test.com— of these, you should have at least 2 of these bookmarked on your site somewhere for future reference. Okay, let's get on back to the coding. So we've got the opening tag And inside of the opening audio tag we have the space, then we've got the controls attribute equals open double quotes controls close double quote, then the closing bracket for the opening audio tag. Then we've got the source here and the different file formats. Again, each of these are the same name. Looks like we got a little mistake here, so the AIF would not be playing because you don't have the colon there, you have the double quotes. But here's what you do. You have a source tag, space, then you have the source attribute which is src equals, and again you got the double quotes opening and the double quotes closing here at the end. In between there you've got the name of the file and then the name of the format. Then you've got the space after the double quote. Then you've got the type attribute which is type equal open double quote and you've got the word audio slash then the name of that format of that file. In this case it's MP3. Close double quote And then the closing bracket. Likewise for any additional sources that you have. So now let's make sure we save this. Let's preview this. Try it in Chrome. And with Komodo, this guy pops up here. Click on preview and there it is. In video 12, you're going to learn the steps. There's the Chrome. And you'll notice also that we've got different looking players depending upon the browser that we're in. Let's preview this in Firefox. See, different looking player. In video 12, you're going to learn the steps involved in setting up an eBay store. And let's try this in Safari, and you'll have an even different look. And that's it. That's how you can add the audio tag to your HTML5 page and a couple of additional pages you might want to bookmark for future reference. That's going to bring us to the end of this video on adding audio to your HTML5 page. Thanks for watching and you have a great day.