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.