Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to play sound file in a web-page in the background?
The HTML audio element is the modern standard for adding audio to web pages. To play a sound file in the background automatically when a page loads, you can use the <audio> element with the autoplay and loop attributes. The <embed> element can also be used but is less recommended for modern web development.
Syntax
Following is the syntax for the HTML audio element −
<audio controls autoplay loop> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio>
Following is the syntax for the embed element −
<embed src="audiofile.mp3" autostart="true" loop="true" width="0" height="0">
Using the HTML Audio Element
The <audio> element is the recommended approach for background audio. By removing the controls attribute and setting small dimensions or hiding it with CSS, the audio player becomes invisible while still playing in the background.
Example − Background Audio with Audio Element
Following example demonstrates playing background audio using the HTML5 audio element −
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Audio</title>
<style>
#bg-audio {
display: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Background Audio Example</h2>
<p>The audio is playing automatically in the background.</p>
<p>Note: Most browsers block autoplay without user interaction.</p>
<audio id="bg-audio" autoplay loop>
<source src="/html/sample-audio.mp3" type="audio/mpeg">
<source src="/html/sample-audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
The audio element is hidden using CSS display: none, so it plays in the background without showing any controls. The loop attribute ensures the audio repeats continuously.
Using the Embed Element
The <embed> element can also play background audio, though it's considered a legacy approach. Set the width and height to very small values or zero to hide the player visually.
Example − Background Audio with Embed Element
<!DOCTYPE html> <html> <head> <title>HTML Background Music with Embed</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Background Music Example</h2> <p>The music is running in the background using embed element.</p> <p>(Using a sample audio file)</p> <embed src="/html/sample-music.mp3" loop="true" autostart="true" width="0" height="0"> </body> </html>
The embed element uses width="0" and height="0" to make it invisible, while autostart="true" and loop="true" enable automatic playback and continuous looping.
JavaScript-Controlled Background Audio
Due to modern browser autoplay policies, background audio often requires user interaction to start. JavaScript provides better control over audio playback.
Example − User-Triggered Background Audio
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Background Audio</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Background Audio Control</h2>
<button id="playBtn">Start Background Music</button>
<button id="stopBtn">Stop Background Music</button>
<p>Click "Start" to begin background audio playback.</p>
<audio id="backgroundAudio" loop>
<source src="/html/background-music.mp3" type="audio/mpeg">
<source src="/html/background-music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script>
const audio = document.getElementById('backgroundAudio');
const playBtn = document.getElementById('playBtn');
const stopBtn = document.getElementById('stopBtn');
playBtn.addEventListener('click', function() {
audio.play();
playBtn.textContent = 'Music Playing...';
playBtn.disabled = true;
});
stopBtn.addEventListener('click', function() {
audio.pause();
audio.currentTime = 0;
playBtn.textContent = 'Start Background Music';
playBtn.disabled = false;
});
</script>
</body>
</html>
This approach gives users control over background audio and complies with modern browser autoplay restrictions.
Browser Autoplay Policies
Modern browsers (Chrome, Firefox, Safari, Edge) block autoplay audio without user interaction to improve user experience. This means background audio with autoplay may not work unless the user has interacted with the page first (clicked, tapped, or pressed a key).
Key Attributes for Background Audio
Following are the important attributes for controlling background audio −
| Attribute | Description | Usage |
|---|---|---|
autoplay |
Starts audio automatically when page loads | May be blocked by browsers |
loop |
Repeats audio continuously | Essential for background music |
controls |
Shows audio player controls | Omit for hidden background audio |
muted |
Starts audio muted | Helps bypass autoplay restrictions |
preload |
How much audio to load initially | Values: auto, metadata, none |
Conclusion
The HTML5 <audio> element is the recommended method for background audio, offering better control and cross-browser compatibility. However, due to modern autoplay policies, JavaScript-controlled audio triggered by user interaction is often the most reliable approach. The legacy <embed> element still works but is not preferred for new projects.
26K+ Views
