Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
We'll get back to that. And then the rest of the file is really very simple. There is our header, there is our audio, and there is the little form with the buttons at the bottom, and we'll show you those a little bit later as well. The first thing I want you to notice about this is that this audio control here, we have an audio container, and it contains these source tags, and each of these source tags refers to a different file with a different media type. And so we have an aac file, we have an mpeg file, and we have an ogg vorbis file.
And so those are three different encodings of the same media. And the reason for that is that different browsers support different encodings. So for example, this Firefox browser, if we come up here to the Tools menu and go into Web Developer > Web Console, we see this it failed to load the aac or the mpeg, the m4a or mp3 files, and those were the first two. And so what it did load is the ogg file. If we come back here up to the Tools menu and go to Page Info and come over here to Media, you see that song.ogg got loaded and here's the preview of it. (music playing) So we can close this, and we can close this, and let's look at the same effect here in Chrome.
In Chrome we can go in the View > Developer > Developer Tools and we can see under Resources, if we click on the Resources tab--it usually comes up at first under Console--but if you click on the Resources tab and under Frames and audio-working.html, that's our file there. You see in this XHR > song.MP3. thats the one that got loaded. And so if we come back over here into our source file, you see that that's the second one. So it wasn't able to load the aac, and instead it loaded the mp3 file.
And there are actually quite a few different things that you can do with it. So you can create your own buttons and make this all fit with the look of your website and these buttons just work. (music playing) And it works exactly the same in Firefox. (music playing) So there's a couple of other attributes.
Of course you can make much more sophisticated controls, and you've probably seen examples of that around the Internet. By providing a selection of different encodings in the source tags, it's possible to support all of the modern browsers with your audio media.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 104937 Viewers
56 Video lessons · 116780 Viewers
71 Video lessons · 85989 Viewers
131 Video lessons · 41127 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.