Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
The audio element is very similar to the video element. The only major difference is that there's no visuals.
HTML Elements
- <audio> - The audio element allows webpages to play sound content.
Resources
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 upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up