The Audio Element

The audio element is very similar to the video element. 0:00 However, as you may have guessed, 0:03 the only major difference is that there's no visuals. 0:05 Instead, we can use the audio element to play an audio file, such as an MP3 file. 0:09 So let's take a look. 0:15 In our workspace, we should have this same simple-video.html file open. 0:17 But we're going to add some audio. 0:23 So if we come down here, right underneath our video, we can make some space to work. 0:25 And we'll type out an audio tag. 0:31 And just like the video tag, there's two different ways to type that out. 0:35 We could just have a single tag representing the entire element. 0:40 Or we could have an opening and closing tag with child elements underneath. 0:45 And that's what we're going to do. 0:50 We'll have an opening and 0:52 closing audio tag, and then we'll add the source in between. 0:54 So the source is actually going to be very similar 1:00 to the source that we have for the video element. 1:03 So let's copy one of these, and we'll paste it here. 1:07 And there's only a few key differences here, so 1:13 this file's named slightly differently. 1:16 It's actually bridge-audio, 1:18 and not an MP4, but an MP3. 1:23 And then we need to change the type from video to audio/mp3. 1:27 Now, just like the video element, we won't actually be able to stop and 1:35 start it without any controls. 1:39 So we need to add the controls attribute to the audio element. 1:41 And just so we don't get confused, let's add some headers to each one of these. 1:46 So we'll add an h2 that says Video Example. 1:50 And then we'll add another one called Audio Example. 1:55 So let's save that out. 2:01 And we'll switch over our example and refresh the page. 2:02 And as you can see, we now have our Video Example still there. 2:07 But we also have this Audio Example down here. 2:10 And all this audio is, is the exact same audio as is featured in the video. 2:14 So I'll play that just so that you can see it works. 2:19 And just like the video, we have a little volume control here. 2:24 So I can slide that up and down. 2:29 Or I can click this to mute it completely. 2:30 And again, this is going to be different depending on your browser. 2:33 So it might look slightly different in Safari or 2:37 Firefox, Internet Explorer, or Opera. 2:39 So, let's go back here. 2:44 And one thing I still wanna point out to you is these source URLs. 2:47 You might be wondering, 2:54 why aren't we just hosting these files directly in our workspace? 2:55 And the answer is we could do that if we wanted to. 2:59 We could have files in our project. 3:02 However, WorkSpaces has a ten megabyte upload limit. 3:05 So, these files are a little bit larger than that. 3:10 I think they're somewhere around 50 megabytes or so. 3:13 And we couldn't quite get those into this project. 3:17 In fact, most video files are pretty large and they won't really work here. 3:21 Audio might be okay, but it's better to stay consistent. 3:27 So, if you want to use your own video and audio files, 3:30 I recommend you host them elsewhere. 3:34 Maybe some place like Dropbox, and then include the URL to them in your workspace. 3:37 And that way you don't have to upload them directly to your workspace. 3:43 So before we move on, one more thing I would like to point out to you is that you 3:49 should take a look at the Mozilla Developer Network documentation for 3:53 the audio element. 3:58 And once again, we have a summary. 4:00 The HTML <audio> element is used to embed sound content into documents. 4:02 There is the usage context and also the attributes. 4:08 And the attributes you'll find very similar to the video element. 4:11 There's things like auto play, controls, loop, muted, and so on. 4:16