The Audio Tag
Learn how to add audio into your HTML5 pages in this quick video tutorial.
Video Transcript
00:00Today we continue our discussion about media components in HTML5. We last left off talking about video.
00:07Next we will talk about audio. So let's jump right in. Right in your HTML browser, and again
00:13you could download our source files if you're a zero2gic member on zero2gic.com.
00:17And if not, just follow along and try to follow what we're doing. So I'm going to create a new audio
00:23element. And the audio is a self-contained element. Well it's not a self-contained, we actually have to
00:31open and close the element. We're not allowed to subtract out of it. We'll talk about why immediately.
00:36But before we talk about why, we will first continue seeing how to create an audio track.
00:42So the next step is we want to set a source to our file. And we'll just put a source attribute
00:47and then define the actual source of our sound. Now I've added into our download folder, I've
00:53added some soundtracks of our jingles. So I'm going to go right ahead and I'm just going to
00:59copy our first jingle and put it into our source attribute, which is inside of the sounds folder.
01:06So I'm just going to make sure that there's no extra space there. I'll click on the save
01:11button. And now we're just going to go right into the browser into our new file. And I'll
01:16just click on refresh. And you'll notice that nothing's happening. There's no sound, but
01:21actually something is happening because mp3 is supported in Safari. By the way, it's not
01:26in Firefox currently as we're recording it late 2013. We have to actually tell the audio
01:32component to play because by default it doesn't auto play currently. So what I want to do
01:38is I want to go into my audio component and just add another attribute called auto play.
01:44Once I set the auto play and I go back into my browser into Safari, in this case, that
01:49supports mp3 and click on refresh. We'll hear in the background, the zero to geek jingle.
01:58The next thing that we want to do is we want to see how can we add controls into our audio
02:02component. And by the way, everything we've seen so far is very, very similar to the
02:07way it would work with a video component. So the way we add control is just by adding
02:12the word controls. By adding the word controls inside of the audio tab, now we could go into
02:18our browser again, click on refresh. And now we will have also a playback controller, which
02:23you could then start play pause. And that gives us basically the basic controls we would
02:29need for any audio component. Now the next capability that we have controlled over is
02:36we could set the volume by default to be muted. The way we set the volume by default
02:41to be muted is by adding the word muted into our audio controller. Saving that and going
02:49back into our browser, if we click on refresh, even though we'll see the audio playback playing,
02:54we'll see that it's going to be playing without any sound until we click on the sound
02:58volume to make it turn back on. Now the next nice L capability is the capability of
03:07looping our sound. So if we have a sound that is repetitive, that we want the background
03:12music to continue on and on on our website as we're in the site, the way we would do
03:16that is by adding the property loop. By adding the property loop, we're basically adding the
03:22capability to also loop through our music. So by doing that, we could then click on
03:27refresh. And although our music now is muted, I'll unmute it and we'll hear our music playing.
03:33And once it reaches to the end, it should restart again automatically. So let's see
03:38that. And you see that the music restarts again automatically without any, and it will
03:43continue on and on forever. So that's really the basic, basic features of our element.
03:50The next element is for example, if we didn't say an auto play, but we want to preload
03:55the music in advance, or we want to not preload it. So I want to show you just a reminder,
04:02just like we did in the video component, and I'm just going to scroll into our video
04:06element and just drop it inside. So we could look at it for a second, I'm going to grab
04:09it from our source files, the original video component that we've created. And you'll see
04:14that in our video crew, we set a preload to none, basically meaning that we're avoiding
04:19the automatic preload of our video player, such as in scenarios where we wanted to put
04:24a poster inside, or in the case of audio, we might want to set a preload to none,
04:30because we might want to start the music later on in the process, and we don't want
04:34it to start in advance. Obviously, by having an auto play and a preload none at the same
04:39time, it kind of like automatically defeats the purpose of preload. Well, it automatically
04:44defeats the purpose of saying don't load. So in the documentation currently, which you
04:50might ask a question, if you know JavaScript, where the language is, is case sensitive,
04:57while HTML isn't case sensitive, it doesn't really matter if you put an uppercase none
05:01or lowercase none. Now, there's no sense of talking much further about the preload
05:07without looking at it in the JavaScript implementation. But I would say the preload
05:13by default equals to auto. By not setting a preload, or setting it to auto, or even
05:19just putting the word preload, we're basically saying we want the automatic behavior,
05:23which is to preload to happen by default. The second option that we've met is to not
05:29load at all. And again, we've said that it only works as long as the user didn't
05:33click on the play button. And as long as auto play is not set, because if it is,
05:37then the purpose of not loading kind of gets out of the way. Now, there's this
05:42third option, and the third option is actually to load only the metadata of
05:47the audio or the video for that case. So in our case, it wouldn't make sense to
05:52add a metadata, really, although it might add, you know, it really depends on
05:57how the HTML five finalizes. What it does is just load gets the file ready,
06:03but it doesn't really start downloading it, it might download a few frames, if it's
06:07a video, or get the basic information, the metadata information of the file
06:11itself. It does make sense if you're doing this in JavaScript, because then
06:15you could start fetching information, which makes a lot more sense versus if
06:19you're only working with the HTML five side of things without integrating with
06:23the JavaScript API. So we won't dig much deeper into this at this stage. But if
06:28you're if you watch our JavaScript videos, we'll definitely take a deeper
06:33look into this.