HTML <audio> Element

Publish in HTML Tutorial el 23/05/2025 17:32

The <audio> element is used to embed sound content in web pages. It allows you to play audio files directly in the browser without requiring plugins. The element supports multiple audio formats (MP3, WAV, OGG) and provides built-in controls for play, pause, volume, and more.

Key attributes include:

src: Specifies the audio file URL
controls: Shows default audio controls
autoplay: Automatically plays the audio
loop: Makes the audio repeat
muted: Starts with audio muted
preload: Specifies if audio should be loaded when page loads

Basic Syntax

Here's the basic structure of the audio element:

Audio Element Examples

1. Basic Audio Player

This example shows a simple audio player with default controls.

Play Code

      <audio controls>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

2. Autoplay and Loop

This audio will automatically play and loop continuously (note: many browsers block autoplay).

Play Code

      <audio controls autoplay loop>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
      </audio>

3. Multiple Source Formats

Providing multiple source formats for better browser compatibility.

Play Code

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

4. Custom Controls with JavaScript

Using JavaScript to create custom controls for the audio player.

Play Code

      <audio id="myAudio">
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3" type="audio/mpeg">
      </audio>
      <div>
        <button onclick="document.getElementById('myAudio').play()">Play</button>
        <button onclick="document.getElementById('myAudio').pause()">Pause</button>
        <button onclick="document.getElementById('myAudio').volume += 0.1">Volume +</button>
        <button onclick="document.getElementById('myAudio').volume -= 0.1">Volume -</button>
      </div>

5. Audio Events with JavaScript

Demonstrating how to use JavaScript audio events to create visual feedback.

Play Code

      <audio id="eventAudio" controls>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3" type="audio/mpeg">
      </audio>
      <div id="status">Status: Ready</div>
      <script>
        const audio = document.getElementById('eventAudio');
        const statusDiv = document.getElementById('status');
        
        audio.addEventListener('play', () => {
          statusDiv.textContent = 'Status: Playing';
          statusDiv.style.color = 'green';
        });
        
        audio.addEventListener('pause', () => {
          statusDiv.textContent = 'Status: Paused';
          statusDiv.style.color = 'red';
        });
        
        audio.addEventListener('ended', () => {
          statusDiv.textContent = 'Status: Finished playing';
          statusDiv.style.color = 'blue';
        });
      </script>

Tips and Tricks

Always include fallback content between the <audio> tags for browsers that don't support it
For better compatibility, provide multiple audio formats (MP3, OGG, WAV)
Use the preload="metadata" attribute to load only essential info initially
Consider user experience - don't autoplay audio without user consent
Use JavaScript to create custom styled players that match your site design
Leverage the Web Audio API for advanced audio manipulation and visualization