Specifying the Audio Sources
There are two common supported audio formats in HTML5. In this video we will show you how to set them up and how to write the html code.
Video Transcript
00:00The good news with audio is you don't have to worry about a lot of different formats to be able to get it to work on all, basically, all modern browsers.
00:08The only thing is there are two different file formats that are commonly used.
00:13The MP3 file currently is supported on IE and on Safari, while AUG is more supported on Firefox and on Opera, I think Chrome supports both of them.
00:28But anyways, if you get both file formats into your file, then you're more or less safe.
00:33So let's see how that works. As long as the browser supports HTML5 audio, it will accept either the MP3 or the AUG file.
00:43Now again, just as we did before with the video, we'll use the Miro file converter to basically convert our audio.
00:51So if I'll go right here into my sounds file, I'm just going to grab our 02Geek MP3 file, drop it right into Miro,
00:59and I could just click on the format and select audio and create a version of AUG as well.
01:06I'll click on convert and a new file will be created.
01:10Once I got that new file, let me just close up a little bit of these extra files around here.
01:15Once I got my AUG file converted, I could then grab it, drop it right into our file.
01:20And now we have two different versions of our file.
01:23All right, so now that we have the MP3 and the AUG file as well, it's time for us to actually update our audio.
01:31So we're not going to use the source element anymore.
01:34And instead of that, we're going to use the exact same format as we did in the video title, which is to use the source attribute.
01:41And once we create the source attribute, we'll do exactly as we did with the video.
01:45We'll put the source of the file itself.
01:48And let me just grab the file name directly.
01:50It's inside of our sounds folder.
01:52So I'm just going to copy the full name and we'll create the source sound MP3.
02:00And we'll set it and configure it and let the player know that this type is the audio mpeg,
02:08which stands for MP3 as well.
02:11All right, in our next element, we'll create another source element.
02:15So let's create quickly another source element.
02:18And the second source element will contain our new AUG file that we've just created a few moments ago.
02:25And again, I'll just copy the file name and paste it right in there.
02:33And last but not least, we'll set the type value as well.
02:36And the type will be an audio as well, only this time it's going to be an AUG file.
02:41And there we go.
02:42We just added a source both for our MP3 and for our AUG.
02:46And now if we go into Safari, which I pretty loaded in advance our file before we had the capability of playing.
02:54And you can see on the bottom that you can see that the content of mpeg is not supported.
02:59But if we click on refresh again this time around, even though it can't accept the MP3 file,
03:04it will accept the AUG file and we'll be able to hear the AUG playing in the background.
03:10So there we go.
03:11So now we created an MP3 player, an audio player that is should work on every modern browser.
03:18Now, last but not least, what happens if you have an audio player that is just not supported?
03:23Just like with the video player, we could actually integrate into this line here anything that we really want.
03:29So I could write here, sorry, you don't have an sound.
03:36You don't have HTML5 sound, audio, let's say audio tag.
03:43And only if the audio tag doesn't exist, users will be able to see this copy.
03:47Now, on the other hand, we could have put here a flash player that would play the audio file
03:52because we already have the audio file as well, which would be a decent solution.
03:56Or we might be in a scenario, for example, what if there's an audience that is blind or deaf
04:02and they would want to get maybe a deaf audience and we might be able to put here, you know,
04:07download our transcript if you have a transcript to the audio file or redirect them to an area of the site.
04:12If this is an audio presentation, you could redirect them to another area of the site
04:17where they would get that information if they're hearing impaired.
04:21All right, so that would be a really great solution.
04:23In this case, in scenario, because our Firefox does have support for it, then we won't see that copy.
04:29And the same is true for Safari.
04:31We won't see that copy because our HTML component is supported.
04:35But if we were working with an older browser, then we would see that alternative copy
04:39as long as we placed it within the boundaries, anything that we put inside of the boundaries
04:43of an audio that isn't a source element would automatically then be disabled
04:48as long as the audio is supported.
04:51If the audio isn't supported, then the browsers would ignore the source element
04:55and then only run whatever's inside there, making sure we're backward compatible.
05:00All right, so there it goes.
05:01That's all you have to know about the basics of an audio player
05:04and a video player to start rolling in it immediately.