Syntax
The <audio> component requires an open and shutting tag. You could cross a single src path:
1 |
<audio src="audio_file.mp3"></audio> |
or further nested supply components ought to it’s worthwhile to help a number of audio codecs.
1 |
<audio>
|
2 |
<supply src="soundtrack.mp3 "sort="audio/mpeg"> |
3 |
<supply src="soundtrack.ogg "sort="audio/ogg"> |
4 |
</audio>
|
Instance
Right here’s an instance of the way to use the <audio> component to embed a single audio file into your net web page:
1 |
<audio controls> |
2 |
<supply src="file.mp3 "sort="audio/mpeg"> |
3 |
Your browser doesn't help the audio component. |
4 |
</audio>
|
Outcome
Hawaiian Ukulele monitor by Andy Slatter.
Attributes
Listed here are a number of the mostly used attributes for the <audio> component:
-
src– Specifies the URL of the audio file to be performed. -
controls– Provides fundamental playback controls, like play, pause, and quantity. -
autoplay– Routinely begins taking part in the audio file when the web page masses. -
loop– Loops the audio file so it constantly repeats. -
muted– Begins the audio playback with the sound muted. -
preload– Specifies whether or not the audio must be preloaded or not.
Content material
The <audio> component doesn’t have any particular content material necessities, but it surely’s essential to incorporate a minimum of one <supply> component contained in the <audio> component to make sure cross-browser compatibility. Right here’s an instance:
1 |
<audio>
|
2 |
<supply src="reel.mp3" sort="audio/mpeg"> |
3 |
<supply src="reel.ogg" sort="audio/ogg"> |
4 |
Your browser doesn't help the audio component. |
5 |
</audio>
|
This instance contains two totally different audio file codecs, MP3 and Ogg Vorbis, with a fallback message for browsers that do not help the <audio> component.
Content material could also be offered contained in the audio component, but it surely’s supposed for older browsers that don’t help the audio component.
Browser Rendering and Styling
There’s at the moment no customary CSS for styling the varied UI controls inside the <audio> participant.
There are a variety of pseudo-classes, resembling :taking part in and :paused, which permit for styling in a really restricted means relying on the participant state, however help is poor.
There are additionally a variety of pseudo-classes which can be utilized with browser prefixes, however once more, adoption is questionable.
Right here’s how main browsers render the <audio> component by default:
