All language subtitles for 26 - Audio.en

- Earlier, we talked about how to put

an image on a webpage.

Images aren't the only kind of media

you can put on a site,

audio and video files are supported

by HTML as well.

Let's first take a look at audio.

We can use the audio element to put

audio files on a webpage.

The HTML is fairly simple and it can

trigger the browser to create an entire

audio play or interface for us.

The structure of the audio element

is similar to the image element

with a few differences.

Unlike image, the audio element has both

an opening and a closing tag.

It's more modern and having both

an opening and closing tag gives it

more power and flexibility.

Now just like the image element,

we use a source attribute to provide

the URL to the file.

In this case, an audio file.

There's more than one audio file format

we can use and I'll talk about which formats

are best in a few minutes.

For now let's just link to this MP3 file.

So what does this do?

Well, actually nothing very useful yet.

We need to tell the browser that yes,

in fact we do want the browser to

provide some controls.

A play button,

a timeline,

a volume control.

Using the controls that are built

into the browser is optional.

We could instead make our own custom controls

using JavaScript and the HTML media element API.

But let's not do that.

Let's add the word controls as an attribute.

If controls is there,

it means true,

yes please do include them.

Boom!

Now we cave an audio player on the page.

We can play,

pause,

and change the volume,

see the time code,

jump around in the timeline.

The audio element is a good example of

the power of HTML to provide a bunch of

functionality that maybe we just don't

want to bother to build ourselves.

We can use what the browser provides.

There are several other attributes that

we can use with audio.

Loop will make the file loop.

When it gets to the end,

it starts playing from the beginning again.

Autoplay will cause the audio to be

played automatically as soon as the page loads,

at least in some browsers.

Now be careful with autoplay.

Most people actually hate it when

the audio starts playing automatically

when they land on a webpage,

so maybe don't use that one.

So why do we have both an opening and closing tag?

That's so that we can use the source element

to specify more than one audio file,

much like we could with the picture element.

Perhaps you want to use a new file format

that's not supported in every browser

while providing a fallback for the older browsers.

Let's remove the source attribute from

the audio element and instead put

it on a source element.

This will do the exact same thing as our previous

example but now we can add additional

source elements with alternative

audio file formats.

MP3s are supported in most modern browsers today.

OGG is another file format that had some

advantages but it never became very popular.

It seems that a new format may come out soon,

the cousin to the AV1 video file format.

But it's not quite here yet.

So I don't really have a second audio

file format to recommend using at the moment.

But I want to show you the syntax for

supporting multiple formats since

it was important for a while and it's likely

to be very useful again sometime

in the near future.

We can make multiple files and list them

in separate source elements.

The browser will use the first file that

it understands in the list.

This is how the syntax works.

You can also provide some fallback text in here

that will only be displayed if the audio element

is not understood by the browser at all.

This is a good example of the resilience

built into HTML where you can write

one set of code and provide a wide

variety or browsers what each of them need

to give some kind of experience to their users.

The audio element is a great way to get

an audio file along with a player

onto a webpage.