HTML - Audio Element
Anzeige
Tummy Tuck Surgery in Turkey: Expert
Care at Low Prices
HTML <audio> element is used to enable the support of audio file within a web page.
We can include multiple sources of audio, however, the browser will choose the most appropriate file
automatically. Most of the attributes of <video> element is also compatible with the <audio> element. The
most frequently used attributes of HTML audio element are controls, autoplay, loop, muted and src.
Plan Your Next Mexico Vacation - The
Adventure Awaits!
Mexico Vacation | Search Ads
Sponsored by: Mexico Vacation LEARN MORE
Syntax
<audio controls>
<source src= "link/to/audio/file"
type = "audio/mp3" />
</audio>
How to embed an audio in HTML?
Like video, audio player is also embedded inside a web page either by setting the src attribute or by
including <source> tag within the audio element. The src attribute and source tag specifies the path or URL
for audio. The current HTML5 draft specification does not specify which audio formats browsers should
support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav. Therefore, it is
also possible to supply all these formats by using multiple <source> tag within <audio> element. We let the
browser decide which format is more suitable for audio playback.
It is necessary to use the controls attribute so that users can manage audio playback functions such as
volume adjustment, forward or backwards navigation and play or pause operations.
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified
expert to boost your career.
Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE
Examples of HTML Audio Element
Here are some examples that illustrate how to use audio element in HTML.
Embed a Audio in HTML page
The following example shows how to embed an audio in a web page
Open Compiler
<!DOCTYPE html>
<html>
<body>
<p>Working with audio element</p>
<audio controls>
<source src=
"/html/media/audio/sample_3sec_audio.mp3"
type = "audio/mp3" />
<source src=
"/html/media/audio/sample_3sec_audio.wav"
type = "audio/wav" />
<source src=
"/html/media/audio/sample_3sec_audio.ogg"
type = "audio/ogg" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Working with audio element
0:00 / 0:00
Autoplay and Looping of Audio in HTML
We can also configure the audio to play automatically in a loop by using the autoplay and loop attributes.
Remember, the Chrome browser does not support autoplay feature unless the muted attribute is used.
Therefore, it is recommended to use autoplay and muted attributes together.
The autoplay is a Boolean attribute that is used to play the audio automatically once the page is loaded. If
loop attribute is present on the <audio> element, the audio sound will automatically rewind to the beginning
once the end of audio is reached.
The following example illustrates the autoplay and looping of audio
Open Compiler
<!DOCTYPE html>
<html>
<body>
<p>Working with audio element</p>
<audio controls autoplay muted loop>
<source src=
"/html/media/audio/sample_3sec_audio.mp3"
type = "audio/mp3" />
<source src=
"/html/media/audio/sample_3sec_audio.wav"
type = "audio/wav" />
<source src=
"/html/media/audio/sample_3sec_audio.ogg"
type = "audio/ogg" />
Your browser does not support the <audio>
element.
</audio>
</body>
</html>
Working with audio element
0:01 / 0:03
Anzeige
Best Liposuctions Surgeons in Turkey (See List)
Explore popular tummy tuck treatments and their
benefits.
Tummy Tuck LEARN MORE
Browser Support for different Audio Formats
The table below illustrates the various audio formats that are supported by different browsers:
Browser OGG WAV MP3
Chrome Yes Yes Yes
Edge Yes Yes Yes
Safari No Yes Yes
Firefox Yes Yes Yes
Opera Yes Yes Yes
