HTML Audio

1) Basic Audio Element

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

The controls attribute tells the browser to display its built-in play/pause button, volume slider, and progress bar. Without it, the audio would be invisible on the page and could only be controlled with JavaScript.

Note: This page shows example code only, since this repository does not host a real audio file. If this example were rendered in a browser with a valid src, you would see a compact native audio player — typically a play/pause button, a draggable progress bar, a time display, and a volume control.

2) Multiple Sources for Format Fallback

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

Not every browser supports every audio format. By listing multiple <source> tags, the browser will try each one in order and play the first format it recognizes. Common formats include MP3 (widest support), OGG, and WAV (uncompressed, larger file size).

3) Autoplay, Loop, and Muted

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

autoplay starts playback as soon as the page loads. loop makes the audio restart automatically when it finishes. However, most modern browsers block autoplay of audio with sound unless the audio is also muted, or the user has already interacted with the site. This restriction exists to prevent unexpected, unwanted noise from disrupting visitors.

4) The preload Attribute

<audio controls preload="metadata">
  <source src="song.mp3" type="audio/mpeg">
</audio>

The preload attribute hints to the browser how much of the file to load before playback:

• none — do not preload the file at all (saves bandwidth).
• metadata — preload only file information (duration, dimensions) but not the audio data itself.
• auto — let the browser decide, often downloading the entire file in advance.

5) Fallback Text for Unsupported Browsers

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  <p>Your browser does not support the <code>audio</code> element.
     <a href="song.mp3">Download the audio file</a> instead.</p>
</audio>

Any HTML placed between the opening and closing <audio> tags (after the <source> elements) is only shown by browsers that do not support the <audio> element at all. It is good practice to include a fallback message, often with a direct download link.