HTML Audio

The <audio> element in HTML is used to embed audio files on a web page. It can be used to play a single audio file or a playlist of audio files. The audio files can be in various formats such as:

  • MP3
  • WAV
  • OGG

The <audio> element can be controlled using JavaScript, allowing for dynamic manipulation of the audio playback, such as play, pause, volume control, etc.

A basic example of an <audio> element would look like this:

<audio controls>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

In the example above, the controls attribute tells the browser to display the default audio controls, such as play/pause, volume, etc. The <source> element is used to specify the source of the audio file and the type of file. The text between the <audio> tags is displayed if the browser doesn't support the <audio> element.

Audio Autoplay Attribute

To use the autoplay attribute on an <audio> element in HTML, you can simply add the autoplay attribute to the <audio> tag like this:

<audio autoplay>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

This will make the audio start playing automatically as soon as the page loads.

However, it's worth noting that many modern browsers don't allow audio to play automatically for user experience and accessibility reasons.

So, it's recommended to not use autoplay feature without user interaction like a button or something else to play it, because some browsers will block it, which can result in a poor user experience.

Instead, you can add a button or a link to control the audio play and pause. In this way the user can interact with the audio and decide when to play it.

You can do this with JavaScript, which allows you to control the audio playback dynamically. Here's an example of a simple play/pause button that can be used to control the audio:

<audio id="audio" src="example.mp3"></audio>

<button onclick="document.getElementById('audio').play()">Play</button>
<button onclick="document.getElementById('audio').pause()">Pause</button>

With these examples, you should be able to add audio to your web pages, and control the playback using the autoplay attribute or JavaScript.

Audio Muted Attribute

To use the muted attribute on an <audio> element in HTML, you can simply add the muted attribute to the <audio> tag like this:

<audio muted>
  <source src="example.mp3" type="audio/mpeg">
  <source src="example.ogg" type="audio/ogg">
    Your browser does not support the audio element.
</audio>

This will make the audio starts in a muted state when the page loads.

You can also use JavaScript to control the muted attribute of the audio element, like this:

<audio id="audio" src="example.mp3"></audio>

<button onclick="document.getElementById('audio').muted = true">Mute</button>
<button onclick="document.getElementById('audio').muted = false">Unmute</button>

It's worth noting that when an audio is muted the volume value of audio should be at a non zero value otherwise this won't change the state of the sound.

Also, you can use .muted property to check if the audio is currently muted and using it accordingly, like this:

if (audio.muted) {
    // do something
}

You can use the above examples to add audio to your web pages, and control the volume of the audio using the muted attribute or JavaScript.

HTML Basics