1 00:00:00,540 --> 00:00:03,940 The audio element is very similar to the video element. 2 00:00:03,940 --> 00:00:05,680 However, as you may have guessed, 3 00:00:05,680 --> 00:00:09,050 the only major difference is that there's no visuals. 4 00:00:09,050 --> 00:00:15,840 Instead, we can use the audio element to play an audio file, such as an MP3 file. 5 00:00:15,840 --> 00:00:17,680 So let's take a look. 6 00:00:17,680 --> 00:00:23,260 In our workspace, we should have this same simple-video.html file open. 7 00:00:23,260 --> 00:00:25,590 But we're going to add some audio. 8 00:00:25,590 --> 00:00:31,680 So if we come down here, right underneath our video, we can make some space to work. 9 00:00:31,680 --> 00:00:35,910 And we'll type out an audio tag. 10 00:00:35,910 --> 00:00:40,050 And just like the video tag, there's two different ways to type that out. 11 00:00:40,050 --> 00:00:45,040 We could just have a single tag representing the entire element. 12 00:00:45,040 --> 00:00:50,630 Or we could have an opening and closing tag with child elements underneath. 13 00:00:50,630 --> 00:00:52,270 And that's what we're going to do. 14 00:00:52,270 --> 00:00:54,890 We'll have an opening and 15 00:00:54,890 --> 00:01:00,360 closing audio tag, and then we'll add the source in between. 16 00:01:00,360 --> 00:01:03,900 So the source is actually going to be very similar 17 00:01:03,900 --> 00:01:07,860 to the source that we have for the video element. 18 00:01:07,860 --> 00:01:13,150 So let's copy one of these, and we'll paste it here. 19 00:01:13,150 --> 00:01:16,190 And there's only a few key differences here, so 20 00:01:16,190 --> 00:01:18,443 this file's named slightly differently. 21 00:01:18,443 --> 00:01:23,151 It's actually bridge-audio, 22 00:01:23,151 --> 00:01:27,358 and not an MP4, but an MP3. 23 00:01:27,358 --> 00:01:35,513 And then we need to change the type from video to audio/mp3. 24 00:01:35,513 --> 00:01:39,848 Now, just like the video element, we won't actually be able to stop and 25 00:01:39,848 --> 00:01:41,780 start it without any controls. 26 00:01:41,780 --> 00:01:46,000 So we need to add the controls attribute to the audio element. 27 00:01:46,000 --> 00:01:50,350 And just so we don't get confused, let's add some headers to each one of these. 28 00:01:50,350 --> 00:01:53,650 So we'll add an h2 that says Video Example. 29 00:01:55,000 --> 00:02:01,030 And then we'll add another one called Audio Example. 30 00:02:01,030 --> 00:02:02,400 So let's save that out. 31 00:02:02,400 --> 00:02:07,110 And we'll switch over our example and refresh the page. 32 00:02:07,110 --> 00:02:10,620 And as you can see, we now have our Video Example still there. 33 00:02:10,620 --> 00:02:14,400 But we also have this Audio Example down here. 34 00:02:14,400 --> 00:02:19,860 And all this audio is, is the exact same audio as is featured in the video. 35 00:02:19,860 --> 00:02:24,000 So I'll play that just so that you can see it works. 36 00:02:24,000 --> 00:02:27,280 And just like the video, we have a little volume control here. 37 00:02:29,060 --> 00:02:30,450 So I can slide that up and down. 38 00:02:30,450 --> 00:02:33,740 Or I can click this to mute it completely. 39 00:02:33,740 --> 00:02:37,410 And again, this is going to be different depending on your browser. 40 00:02:37,410 --> 00:02:39,880 So it might look slightly different in Safari or 41 00:02:39,880 --> 00:02:42,860 Firefox, Internet Explorer, or Opera. 42 00:02:44,200 --> 00:02:47,210 So, let's go back here. 43 00:02:47,210 --> 00:02:54,160 And one thing I still wanna point out to you is these source URLs. 44 00:02:54,160 --> 00:02:55,100 You might be wondering, 45 00:02:55,100 --> 00:02:59,320 why aren't we just hosting these files directly in our workspace? 46 00:02:59,320 --> 00:03:02,850 And the answer is we could do that if we wanted to. 47 00:03:02,850 --> 00:03:05,340 We could have files in our project. 48 00:03:05,340 --> 00:03:10,450 However, WorkSpaces has a ten megabyte upload limit. 49 00:03:10,450 --> 00:03:13,840 So, these files are a little bit larger than that. 50 00:03:13,840 --> 00:03:17,320 I think they're somewhere around 50 megabytes or so. 51 00:03:17,320 --> 00:03:21,970 And we couldn't quite get those into this project. 52 00:03:21,970 --> 00:03:27,160 In fact, most video files are pretty large and they won't really work here. 53 00:03:27,160 --> 00:03:30,630 Audio might be okay, but it's better to stay consistent. 54 00:03:30,630 --> 00:03:34,415 So, if you want to use your own video and audio files, 55 00:03:34,415 --> 00:03:37,118 I recommend you host them elsewhere. 56 00:03:37,118 --> 00:03:43,220 Maybe some place like Dropbox, and then include the URL to them in your workspace. 57 00:03:43,220 --> 00:03:47,310 And that way you don't have to upload them directly to your workspace. 58 00:03:49,080 --> 00:03:53,540 So before we move on, one more thing I would like to point out to you is that you 59 00:03:53,540 --> 00:03:58,940 should take a look at the Mozilla Developer Network documentation for 60 00:03:58,940 --> 00:04:00,660 the audio element. 61 00:04:00,660 --> 00:04:02,582 And once again, we have a summary. 62 00:04:02,582 --> 00:04:08,038 The HTML