HTML audio Tag

Basic Syntax

<audio controls src="audiofile.mp3">
  Your browser does not support the audio element.
</audio>

- src: Specifies the URL of the audio file.

- controls: If this boolean attribute is present, the browser will offer controls for the audio (like play/pause, volume).

- Fallback content: Text between the opening and closing <audio> tags is displayed in browsers that do not support the element.

Using Multiple Sources with <source>

Different browsers support different audio formats. To provide a robust solution, you can specify multiple audio sources using the <source> tag within the <audio> element. The browser will use the first recognized format.

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

- The type attribute in the <source> tag specifies the MIME type of the audio file, which helps the browser determine if it can play the file without having to download it first.

Common Attributes

- autoplay: A boolean attribute. If present, the audio will automatically start playing as soon as it is ready. (Note: Autoplay with sound is often blocked by browsers or considered poor user experience; use with caution).

- loop: A boolean attribute. If present, the audio will automatically start over again, every time it is finished.

- muted: A boolean attribute. If present, the audio output will be muted by default.

- preload: This attribute suggests to the browser what should be loaded when the page loads. Possible values:

- none: The browser should not preload the audio.
- metadata: The browser should only preload metadata (e.g., length).
- auto: The browser should preload the entire audio file.

- volume: Sets the default volume of the audio, from 0.0 (silent) to 1.0 (loudest).

Examples

Audio with controls and multiple sources:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.wav" type="audio/wav">
  Please update your browser to enjoy this audio.
</audio>

Autoplaying and looping background music (use sparingly):

<audio autoplay loop muted>
  <source src="background.mp3" type="audio/mpeg">
</audio>

(Note: muted is often required for autoplay to work in modern browsers).

Accessibility

- Provide text transcripts or captions for important audio content, especially for users who are deaf or hard of hearing. - Ensure controls are accessible via keyboard.

Supported Audio Formats

Commonly supported formats include: - MP3 (audio/mpeg) - Ogg Vorbis (audio/ogg) - WAV (audio/wav) - AAC (audio/aac) Support can vary by browser, so providing multiple sources is a good practice.