Preview
Video Player
00:00
00:00
The Audio Element
4:24The audio element is very similar to the video element. The only major difference is that there's no visuals.
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