Duration: 20 minutes
Summary: In this video, we continue our HTML5 discussion. About a year ago, we discussed some of the elements of HTML 5. In these videos we are continuing the course by digging deeper into HTML5 elements. Today we will talk about audio. We will see first how to create the HTML 5 page. We will notice that many of the attributes we had in previous versions have been removed. We will see how to create the header and audio tags. Then, we explore the attributes of the audio tag (autoplay, controls, and loop). We use two examples: one mp3 and one wav. In every case, we will load the file in different browser to see the support. And this is one of the challenges you will face as an HTML 5 developer: you need to know who your clients are (which browser and which version of the browser they are using). But at the same time, you will need to add some fall-back mechanism for the older browsers
Technology Used: HTML 5 and Visual Studio 2010
Keyword: HTML5, Visual Studio 2010, DOCTYPE, charset, header, audio, source, autoplay, controls, loop.
Transcript: Welcome back everyone. This is Ayad Boudiab. I'm a senior .NET application developer and I'm continuing our series on HTML5.
If you recall, maybe a year back, we talked about HTML5. We discussed some of the features. We discussed that as in a summary format. We didn't spend a good amount of time on every additional feature and how they work in different browsers and so on. In this video and the few upcoming videos, I'll be discussing more details about HTML5. We'll discuss the new features that have been added. We'll experiment with them in different browsers because this is one of the new challenges as a developer, is basically figuring out who your clients are. When I say that, I mean what version of the browser they're using or which browser they're using. Some clients could be using Chrome. Others could be using IE. Some of them could be using different versions of IE. Some of them are using Safari Firefox, so who your clients are and what features we have supported in the browser they're using. That's the important challenge for you as a HTML5 developer would be.
Basically, you need to experiment with every feature and you need to test every feature in different browsers to have some type of backup. If something would not work in one version, what would your users see? Of course, if you're trying to show them a video you prefer not to say, "This is not supported" and this is the end of it. You have to provide different versions so they can still watch the video you want them to watch.
Another important item that I'd like to bring to your attention, if you notice on the screen, I have Visual Studio 2010. That doesn't mean Visual Studio 2010 is the only way of developing HTML5. No, it's not the case. You could write your HTML5 in notepad or any other application, and you'll be able to load them in the browser. I use Visual Studio because I'm used to it. There are some features that are notice in Visual Studio that have simplified my work. For example, since I have Visual Studio Service Pack 1 installed, under tools, extension manager, I have under the online gallery, it's going to retrieve some information related to what features I have available out there, and I'll be able to download them and use them within my application.
One of those features could be the web standard. Here we have CSS3 support and update HTML5 IntelliSense. That would help me, as a developer to use IntelliSense within my HTML page. That's why I use Visual Studio, but again, you don't have to. You can use any of the free development environments you find on the internet, or you can simply use Notepad, and you'll be able to load all your pages in the browser the same way we're doing in here.
Again, we're comfortable now with the development environment. It could be Notepad. It could be Visual Studio or anything that you find out there that's free. As far as the browsers, you need to make sure that you test all your pages in all the different browsers, IE, for example, Chrome, Firefox, Opera. You have to be careful when you're developing HTML5 pages because although the standard is defined, it's not implemented in all browsers. It's going to take some time for this to be completely implemented. That does not mean that you have to wait until everything is implemented before you start using it.
Let's go ahead and get started here. What I did is I created a new website, and that website I made an empty website. I already created that. For this website, I'm going to add a new item. That new item is an HTML page. Since today, I'll be working with audio, let's name this one audio". That will create for me an HTML page named 'audio.HTM'. By the way, web.Configure here is automatically created for you but that's not something I'm going to use in my videos so I'm going to ignore it. I have audio.HTM as the HTML page that I'm working with. I also will be using some audios, mp3 and wav in my examples. Let's go ahead and get those out of the way.
I'm going to right-click. Let me bring this one a little bit over so you can see what I'm doing. Add new folder. Let's name this one "audios". In that folder, I will add new items, and for this, I have few items on the side that I'm copying here. I'll place those in my examples on my projects. I will add those into as existing items. Right-click here. I just copy them over and then add existing item. Those items would be under audios. Let's try to refresh. I must have copied them into the wrong folder. Actually, I did not but if I minimize the window, you will notice in here that I need to show all files, not just the .NET stuff. I'll select them all and I'll say "add". Now, in the audios folder, I have the following.
These three audios, I just found on my machine that's related to windows and I downloaded this from the internet, so it's nothing fancy in here, just a one-way file and then three mp3s. These are the files that I need to use within my HTML.
Now, a few things that we have to be careful about when developing HTML5; First, we don't have this public transitional, and the DTDs, and all this; I don't need all of this. I'm going to delete them. My declaration for HTML5 is simply doc type HTML. That's all I need. Also, for the HTML, I don't need the name space. Then only thing I need in here is the Lang, which is the language equals en is for English. It's that simple.
You don't need all the mess you've had before. All we have in here is the doc type HTML and the language would be en. That's all I need for the HTML. Inside the ad, I have the title in here for example, experimenting with the audio. Then, I also add the Meta tag that I need for my HTML5 page. Meta and charset equals, and I select UTF8. Now you see why we use Visual Studio, because it helps us a lot with IntelliSense. This is pretty much what I need within my HTML5 page. If you notice, it's very simple. We've got the doc type, the HTML with the language being English, and the Meta tag for the charset being UTF8.
Now, I'm ready to go with the rest of the information. In here, I'm going to add my audios, so I can be able to work with them. Let's go ahead and get started, and create the first one.
Inside the body I can create the header. That's another thing that we can create with HTML5. Remember in the previous versions of HTML, we used to create divs, and those divs we give them IDs to mean something for us. Wecan say this div means the header. This div means the footer. This div means something else inside the body. HTML5 already defined all the semantics for us. It gives us the meaning of what everything is for. When I want header, I declare header. When I want a footer, I declare a footer.
This is the first thing, being the header. In that header, I can declare for example an H1 tag. For example, I can say in here, mp3 audio. Inside the body and underneath the header, I can declare my audio tag because after all I need this space on my audio. The audio tag has some properties, but I'll be back to that in a second. Inside the audio, I can declare the source, which is the source of my audio. Where is that coming from? Using the SRC attribute, I can define where the source is coming from. I say equal, and it tells me I can pick the URL that I'm interested in. Double click under audio, I want music1.mp3. That gave me the audio that I need in the source stack.
Of course, underneath here, if you have different types of this, for example wav and aug, and other types of audio that you have, you can place this right underneath this source by placing another source; something something.wav. You can place different sources so the browser would run the one that it works for. For example, maybe the wav is not supported in IE, I provide the mp3 and also provide the wav because maybe the mp3 is not supported in Firefox but the wav is. I provide different source so we know which one would work in different browsers.
At the end, after you place all this, you can say something in here simple to text for the user to see that his browser does not support the specific audio you're working with. You can format it any way you want. In this case, I'm going to simply say, "This browser does not support this mp3 audio."
This text will only show up to the user if this mp3 is not supported. Go ahead and save. This is simply it. I can preview that in the browser but there are few properties that we can set in here to make things a little bit more interesting inside the audio. For example, I can say auto play like that or auto play equals auto play. It's your choice but HTML5 supports the following property. You don't have to give it a value. When I say auto play, it means when the browser loads, it automatically plays the audio.
When you're playing the audio, let's see how that would work if I load that in the browser. Right-click, view in browser. Here's the browser, and it starts playing. It says mp3 audio and it starts playing with nothing in there. Let me close that for a second. In addition to auto play, I'm going to make it loop. It means when it's done, play it again, it's done, play it again.
I can say in here equals loop but I don't have to. I can say also controls, equals controls or just keep it as is. When I add the controls as an attribute to audio, and I try to view that in the browser, I will see the controls. I can reduce the sound. I can stop it, play it again, and you notice I have all the controls supported I need for my audio.
Again, I can make it mute or I can click it again and I can hear it, and I can increase the sound and so on. Watch what's going to happen when it gets to the end. It gets to the end and it loops back again because I said "loop: in my property. It loops back again and plays that audio.
One more thing. Let's view it in the browser one more time. I'm going to get this link, stop it, and then I'm going to load IE. Here's internet explorer. Put that there and it doesn't show me the control. I cannot play this one. It didn't say, "This browser does not support mp3 audio," because to my knowledge IE9 should support MP3 audio, but in here it didn't give me the controls that I was expecting. If I switch back to IE7, you note it says, This browser does not support this mp3 audio." If I go back to IE9 it shows me the audio but it doesn't play it. It just makes the controls disabled.
Let me load Firefox. This is Firefox 11. Put the URL, and it doesn't show me anything. I cannot play it. It didn't give me the actual text. There's nothing. Let's load Opera. No, I don't want to make it the default browser. It's playing a different audio from a previous one that I was experimenting with. I'll get to that in a second. At least in the mp3 audio, it didn't play, although the sound is fine. If I click on it, nothing happens. It's not playing my mp3 in Opera. Let's go ahead and close that.
Now, let's go ahead and add the wav one that I had earlier. Let's copy that. Paste it down here. Comma this one out, and let's say this one says "wav audio" and then let's select the URL that we are interested in equals, pick the URL. I'm interested in doc.wav, the one that you just saw earlier and it says, "This browser does not support wav audio." Let's save and then preview that in the browser.
It's playing like it's supposed to in Chrome. In Chrome its fine. Let's copy that and let's load that in IE. Again, IE doesn't show me the controls I'm interested in. Let's go ahead and load that in Firefox. Firefox is fine with the wav file but it was not with the mp3. Let's load Opera. It's going to play the last one I had but I can place, and here is the wav file playing fine in Opera and looping back. It was not working with the mp3.
What can we walk away with, with this video? You notice that there are a lot of files that work differently in different browsers in HTML5. You have to be careful when displaying audio on your page. You have to understand who your users are and what versions and what browsers they're using. That we can support different wav files, so that way all the users will have the same experience and they will not see, "This browser does not support..." whatever audio you're running.
We'll continue with more videos on HTML5. Please stay tuned for the upcoming videos. Thank you very much for listening. I'm Ayad Boudiab and you take care.