HTML Audio src Property: Audio Source

HTML Audio src Property: Audio Source

The src attribute of the HTML <audio> element specifies the URL of the audio file to be played. This attribute is fundamental to embedding audio content in web pages, allowing developers to deliver a rich multimedia experience. In this guide, we’ll explore the src property in detail, covering syntax, usage, supported formats, and practical examples.

What is the src Property?

The src (source) property is an essential attribute of the HTML <audio> element. It defines the location (URL) from which the audio file will be fetched and played. Without the src property, the <audio> element cannot load and play any audio content. It supports various audio file formats, including MP3, WAV, and Ogg, depending on browser compatibility.

Purpose of the src Property

The primary purpose of the src property is to:

• Specify the audio source URL.
• Enable the <audio> element to load and play audio files.
• Provide flexibility in selecting audio files from different locations (local or remote).
• Support different audio formats based on browser support.

Syntax

The syntax for using the src attribute in the <audio> element is straightforward:

<audio src="URL">
  Your browser does not support the audio element.
</audio>

Here, URL is the address of the audio file you want to play.

Possible Values

The src attribute accepts a single value:

• URL: A valid URL pointing to an audio file. This can be an absolute URL (e.g., https://example.com/audio.mp3) or a relative URL (e.g., audio/sound.mp3).

Supported Audio Formats

Browser support for audio formats varies. Here’s a general overview:

Format	MIME Type	Browser Support
MP3	audio/mpeg	Widely supported across all modern browsers
WAV	audio/wav	Supported by most browsers; uncompressed format, larger file size
Ogg	audio/ogg	Supported by Firefox, Chrome, and Opera
AAC	audio/aac	Supported by Safari and some other browsers

To ensure broader compatibility, it’s recommended to provide multiple audio sources using the <source> element inside the <audio> element.

Using the <source> Element

The <source> element allows you to specify multiple audio sources within the <audio> element. The browser will attempt to play the first supported format.

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

In this example, the browser will first try to play the MP3 file. If it doesn’t support MP3, it will try the Ogg file.

Practical Examples

Let’s explore some practical examples of using the src property with the <audio> element.

Basic Audio Playback

This example demonstrates basic audio playback using the src attribute.

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

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Audio Playback with Controls

This example shows how to add audio controls to the audio player using the controls attribute.

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

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Setting Audio Source Dynamically with JavaScript

Here’s how to set the src property dynamically using JavaScript. This allows you to change the audio source based on user interaction or other events.

<audio id="myAudio" controls></audio>
<button id="changeSource">Change Audio Source</button>

<script>
  const audioElement = document.getElementById("myAudio");
  const changeSourceButton = document.getElementById("changeSource");

  changeSourceButton.addEventListener("click", function () {
    audioElement.src = "audio/file-example_MP3_700KB.mp3";
    audioElement.load(); // Important: Reload the audio element
    audioElement.play(); // Start playing the new source
  });
</script>

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Using Multiple Sources for Compatibility

This example demonstrates using multiple <source> elements to ensure compatibility across different browsers.

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

You need to have “audio/file-exampleMP3700KB.mp3″ and “audio/file-exampleOGG500KB.ogg” in your working directory.

Muting Audio

<audio id="myAudio" controls>
  <source src="audio/file-example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<button id="muteButton">Mute/Unmute</button>

<script>
  const audioElt = document.getElementById("myAudio");
  const muteBtn = document.getElementById("muteButton");

  muteBtn.addEventListener("click", function() {
    audioElt.muted = !audioElt.muted;
    muteBtn.textContent = audioElt.muted ? "Unmute" : "Mute";
  });
</script>

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Preloading Audio

<audio id="myAudio" controls preload="auto">
  <source src="audio/file-example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Capturing the played property of audio

<audio id="myAudio" controls>
  <source src="audio/file-example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Audio Played: <span id="playedValue"></span></p>

<script>
  const audElt = document.getElementById("myAudio");
  const playedValElt = document.getElementById("playedValue");

  audElt.addEventListener("timeupdate", function() {
    const playedRanges = audElt.played;
    let playedSeconds = 0;

    for (let i = 0; i < playedRanges.length; i++) {
      playedSeconds += playedRanges.end(i) - playedRanges.start(i);
    }

    playedValElt.textContent = playedSeconds.toFixed(2) + " seconds";
  });
</script>

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Capturing the network State property of audio

<audio id="myAudio" controls>
  <source src="audio/file-example_MP3_700KB.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<p>Network State: <span id="networkStateValue"></span></p>

<script>
  const aEle = document.getElementById("myAudio");
  const netState = document.getElementById("networkStateValue");

  function updateNetworkState() {
    switch (aEle.networkState) {
      case HTMLMediaElement.NETWORK_IDLE:
        netState.textContent = "Idle";
        break;
      case HTMLMediaElement.NETWORK_LOADING:
        netState.textContent = "Loading";
        break;
      case HTMLMediaElement.NETWORK_NO_SOURCE:
        netState.textContent = "No Source";
        break;
      case HTMLMediaElement.NETWORK_EMPTY:
        netState.textContent = "Empty";
        break;
      default:
        netState.textContent = "Unknown";
        break;
    }
  }

  aEle.addEventListener("loadstart", updateNetworkState);
  aEle.addEventListener("progress", updateNetworkState);
  aEle.addEventListener("suspend", updateNetworkState);
  aEle.addEventListener("abort", updateNetworkState);
  aEle.addEventListener("error", updateNetworkState);
  aEle.addEventListener("emptied", updateNetworkState);
</script>

You need to have “audio/file-exampleMP3700KB.mp3″ in your working directory.

Tips and Best Practices

• Provide Multiple Formats: Use the <source> element to offer multiple audio formats for broader browser compatibility.
• Use Relative Paths: Prefer relative paths for local audio files to avoid issues when deploying your website to different environments.
• Handle Errors: Implement error handling to gracefully manage cases where the audio file cannot be loaded or played.
• Optimize Audio Files: Compress audio files to reduce file size and improve loading times.
• Test Across Browsers: Always test your audio implementations across different browsers and devices to ensure consistent playback.
• Accessibility: Provide alternative content for users who cannot access audio, such as transcripts or captions.

Browser Support

The src attribute of the <audio> element is widely supported across all modern web browsers. However, support for specific audio formats may vary.

Conclusion

The src property is a fundamental attribute of the HTML <audio> element, enabling you to embed and play audio content on your web pages. By understanding how to use the src property effectively and providing multiple audio formats, you can deliver a seamless and accessible multimedia experience to your users.