Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

The Audio Element

4:24 with Nick Pettit

The audio element is very similar to the video element. The only major difference is that there's no visuals.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

HTML Elements

<audio> - The audio element allows webpages to play sound content.

Resources

MDN <audio> Documentation

Video and Audio URLs

Here are the video and audio files used in this course. There is no need to download these files; they are just listed here so that you can easily copy these URLs into your code.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up