HTML Audio

❮ Prev Next ❯

HTML Audio is a way to embed audio content on a web page. It can be used to add background music, sound effect, or even podcastto a website.

HTML Audio is a way to embed audio content on a web page. It can be used to add background music,element allows you to specify the source sound effects,or even podcast episodes to a website.

This tag allows you to embed audio content in your HTML pages.

This element can stream audio, maybe using a microphone via getUserMedia()or it can play an audio source which you reference using the src attribute: 

<audio src="file.mp3"></audio>

Controls

By default the browser does not show any controls for this element. Which means the audio will play only if set to autoplay (more on this later) and the user can't see how to stop it or control the volume or move through the track.

To show the built-in controls, you can add the controlsattribute: 

<audio src="file.mp4" controls></audio>

Controls can have a custom skin.

Type

You can specify the MIME type of the video file using the typeattribute. If not set, the browser will try to automatically determine it: 

<audio src="file.mp3" controls type="audio/mpeg"></audio>

Autoplay

A audio file by default does not play automatically. Add the autoplay attribute to play the video automatically: 

<audio src="file.mp3" controls autoplay></audio>

Muted

You can also play an audio file muted using the mutedattribute (not really sure what's the usefulness of this): 

<audio src="file.mp3" controls autoplay muted></audio>

Loop

The loopattribute restarts the audio playing at 0:00 if set; otherwise, if not present, the audio stops at the end of the file: 

<audio src="file.mp3" controls autoplay loop></audio>

Audio with multiple sources:

To ensure maximum browser compatibility, you can include multiple sources for your audio file using the <source>element.

The browser will choose the best supported format automatically. Here's an example: 

<audio src="file.mp4" width="200px" height="150px">
  <source src="file.mp3" type="audio/mp3" >
  <source src="file.ogg" type="audio/ogg" >
</audio>

In the above example, two audio sources are provided, one in mp3 format and the other in ogg format. If the browser supports MP3, it will play that file.

Otherwise, it will play the ogg file. If the browser does not support either format, it will display a fallback message.

Example 

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Title of the Document</title>
</head>
<body>
  <h1>HTML Audeo</h1>
  <audio src="http://surl.li/gzvdy" width="200px" height="150px">
    <source src="http://surl.li/gzvdy" type="audio/mp3" >
    <source src="http://surl.li/gzvdy" type="audio/ogg" >
  </audio>
  </body>
</html>

Using JavaScript you can listen for various events happening on an audio element, the most basic of which are:

  • playwhen the file starts playing.
  • pausewhen the video was paused.
  • playingwhen the video is resumed from a pause.
  • endedwhen the end of the video file was reached.

These are just a few examples of HTML multimedia elements. There are many other attributes and elements available that you can use to add multimedia content to your web pages. now let learn about Learn HTML in the next chapter.

❮ Prev Next ❯