Now that we learned about text-based content, let us dig into
<audio>! Surely everyone needs
<audio>—how else would you listen to your
Korean hip hop?
<audio> element is used to embed audio content into a document. Like
src to link the audio source.
<audio> <source src="iAmAnAudioFile.mp3" type="audio/mp3"> </audio>
In this example, we created an
<audio> element. Then we created a
<source> element to encapsulate our audio link. In this case,
iAmAnAudioFile.mp3 is our audio file. Then we specified the type by using
type and named what kind of audio it is.
Although not always necessary, it’s recommended that we state the type of audio as it helps the browser identify it more easily and determine if that type of audio file is supported by the browser.
We linked our audio file into the browser but now we need to give it controls. This is where attributes come in. Attributes provide additional information about an element.
Attributes allow us to do many different things to our audio file. There are many attributes for
<audio> but today we’re going to be focusing on
controls: automatically displays the audio controls into the browser such as play and mute.
src: specifies the URL of the audio file.
As you might have noticed, we already used the
src attribute in the example code above. Most attributes go in the opening tag of
For example, here’s how we could add both autoplay functionality and audio controls:
<audio autoplay controls>
You can find other attributes here: Useful attributes.
In the code editor, create an
<audio> tag with the attribute
controls directly under the commented line.
Add a source for the audio inside the
<audio> tag by using this code:
<source src="" type="audio/mp3">
Use the following URL as the source for the audio: