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 add background music to your web page?
To add background music on a web page, you can use the <audio> element or the legacy <embed> tag. The modern approach uses HTML5's <audio> element with the autoplay attribute to start music automatically when the page loads.
For background music, set the audio player to be hidden by using CSS or by omitting controls. The loop attribute makes the audio repeat continuously. Always upload your music file to the server and reference it in the src attribute.
Method 1: Using HTML5 Audio Element (Recommended)
The <audio> element is the modern standard for embedding audio content:
<!DOCTYPE html>
<html>
<head>
<title>Background Music with HTML5 Audio</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Background music is playing automatically.</p>
<audio autoplay loop>
<source src="/audio/background-music.mp3" type="audio/mpeg">
<source src="/audio/background-music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Method 2: Using Embed Tag (Legacy)
The <embed> tag is an older method but still works in most browsers:
<!DOCTYPE html>
<html>
<head>
<title>Background Music with Embed</title>
</head>
<body>
<h1>My Website</h1>
<p>The music is running in the background.</p>
<embed src="/audio/background-music.mp3"
loop="true"
autostart="true"
width="0"
height="0">
</body>
</html>
Method 3: JavaScript Control
For better user experience, you can add play/pause controls using JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Controlled Background Music</title>
</head>
<body>
<h1>My Website</h1>
<button onclick="playMusic()">Play Music</button>
<button onclick="pauseMusic()">Pause Music</button>
<audio id="bgMusic" loop>
<source src="/audio/background-music.mp3" type="audio/mpeg">
</audio>
<script>
const music = document.getElementById('bgMusic');
function playMusic() {
music.play();
}
function pauseMusic() {
music.pause();
}
// Auto-play after user interaction (modern browsers requirement)
document.addEventListener('click', function() {
music.play();
}, { once: true });
</script>
</body>
</html>
Key Attributes
| Attribute | Purpose | Values |
|---|---|---|
autoplay |
Start automatically | Boolean |
loop |
Repeat continuously | Boolean |
controls |
Show player controls | Boolean (omit for hidden) |
Important Considerations
Browser Autoplay Policies: Modern browsers block autoplay audio without user interaction. Consider providing a play button or waiting for user interaction before starting music.
File Formats: Use multiple audio formats (MP3, OGG, WAV) for cross-browser compatibility.
User Experience: Always provide controls to stop or pause background music, as continuous audio can be annoying to users.
Conclusion
Use the HTML5 <audio> element for modern web development. Consider user experience by providing controls and respecting browser autoplay policies. The <embed> tag remains functional but is considered legacy.
36K+ Views
