HTML Audio Guide

Learn how to embed and control audio content in your web pages

Introduction to HTML Audio

The HTML <audio> element is used to embed sound content in documents. It can contain one or more audio sources, represented using the src attribute or the <source> element.

Audio Examples

Basic Audio Player

A simple audio player with default controls

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

Multiple Audio Sources

Provide multiple source formats for better browser compatibility

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

Custom Controls

Create your own controls with JavaScript

<audio id="custom-audio">
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<div class="audio-controls">
  <button onclick="document.getElementById('custom-audio').play()">Play</button>
  <button onclick="document.getElementById('custom-audio').pause()">Pause</button>
  <button onclick="document.getElementById('custom-audio').muted = !document.getElementById('custom-audio').muted">
    Toggle Mute
  </button>
</div><audio id="custom-audio">
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<div class="audio-controls">
  <button onclick="document.getElementById('custom-audio').play()">Play</button>
  <button onclick="document.getElementById('custom-audio').pause()">Pause</button>
  <button onclick="document.getElementById('custom-audio').muted = !document.getElementById('custom-audio').muted">
    Toggle Mute
  </button>
</div>

Audio Attributes

Using various audio element attributes

<audio controls loop muted preload="auto">
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio><audio controls loop muted preload="auto">
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Background Audio

Audio that plays after user interaction

(Click button to start background music)

<button id="play-btn">Play Background Music</button>
<audio id="bg-audio" loop>
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById('play-btn').addEventListener('click', () => {
    document.getElementById('bg-audio').play();
  });
</script><button id="play-btn">Play Background Music</button>
<audio id="bg-audio" loop>
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<script>
  document.getElementById('play-btn').addEventListener('click', () => {
    document.getElementById('bg-audio').play();
  });
</script>

Audio Events

Using JavaScript to handle audio events

Check browser console for event logs

<audio id="event-audio" controls>
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<script>
  const audio = document.getElementById('event-audio');
  
  audio.addEventListener('play', () => {
    console.log('Audio started playing');
  });
  
  audio.addEventListener('pause', () => {
    console.log('Audio paused');
  });
  
  audio.addEventListener('ended', () => {
    console.log('Audio finished playing');
  });
</script><audio id="event-audio" controls>
  <source src="/audio/tur_tu_chir_audio.mp3" type="audio/mpeg">
</audio>

<script>
  const audio = document.getElementById('event-audio');
  
  audio.addEventListener('play', () => {
    console.log('Audio started playing');
  });
  
  audio.addEventListener('pause', () => {
    console.log('Audio paused');
  });
  
  audio.addEventListener('ended', () => {
    console.log('Audio finished playing');
  });
</script>

Audio Attributes

Attribute	Description	Example
`controls`	Shows the default audio controls (play, pause, volume, etc.)	`<audio controls>...</audio>`
`autoplay`	Audio will start playing as soon as it's ready (may be blocked by browsers)	`<audio autoplay>...</audio>`
`loop`	Audio will start over again when finished	`<audio loop>...</audio>`
`muted`	Audio output will be muted by default	`<audio muted>...</audio>`
`preload`	Specifies if and how the audio should be loaded when the page loads (auto, metadata, none)	`<audio preload="auto">...</audio>`
`src`	Specifies the URL of the audio file (alternative to using <source> element)	`<audio src="/audio/tur_tu_chir_audio.mp3">...</audio>`

Advanced Audio Techniques

Audio Visualization

Using the Web Audio API to create visualizations

(Audio visualization would appear here with actual implementation)

<!DOCTYPE html>
<html>
<head>
  <title>Audio Visualization</title>
  <style>
    #visualizer { width: 100%; height: 100px; background: #f0f0f0; }
  </style>
</head>
<body>
  <audio id="audio" controls src="/audio/tur_tu_chir_audio.mp3"></audio>
  <canvas id="visualizer"></canvas>
  
  <script>
    const audio = document.getElementById('audio');
    const canvas = document.getElementById('visualizer');
    const ctx = canvas.getContext('2d');
    
    // Web Audio API setup would go here
    // This is a simplified example
  </script>
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>Audio Visualization</title>
  <style>
    #visualizer { width: 100%; height: 100px; background: #f0f0f0; }
  </style>
</head>
<body>
  <audio id="audio" controls src="/audio/tur_tu_chir_audio.mp3"></audio>
  <canvas id="visualizer"></canvas>
  
  <script>
    const audio = document.getElementById('audio');
    const canvas = document.getElementById('visualizer');
    const ctx = canvas.getContext('2d');
    
    // Web Audio API setup would go here
    // This is a simplified example
  </script>
</body>
</html>

Audio Streaming

Implementing live audio streaming

(Audio streaming player would appear here with actual implementation)

<!DOCTYPE html>
<html>
<head>
  <title>Audio Streaming</title>
</head>
<body>
  <audio controls>
    <source src="http://stream.example.com/stream" type="audio/mpeg">
    Your browser does not support audio streaming.
  </audio>
</body>
</html><!DOCTYPE html>
<html>
<head>
  <title>Audio Streaming</title>
</head>
<body>
  <audio controls>
    <source src="http://stream.example.com/stream" type="audio/mpeg">
    Your browser does not support audio streaming.
  </audio>
</body>
</html>

Audio Best Practices

Accessibility

Always provide controls for audio playback
Include fallback content for unsupported browsers
Provide transcripts for spoken audio content
Allow users to control volume and mute audio
Don't autoplay audio without user consent

Performance

Use appropriate audio formats (MP3 for broad compatibility)
Consider using preload="metadata" for large files
Optimize audio files for web (bitrate, length)
Use CDN for audio files if serving to many users
Implement lazy loading for non-critical audio

< Previous: HTML Video Next: HTML Canvas >