Background Music Plays Automatically HTML, CSS, and JavaScript .

Background Music Plays Automatically HTML, CSS, and JavaScript.

background music that plays

Here’s a simple example:

HTML

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website with Background Music</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>

  <div class="music-player">
    <audio id="background-music" loop>
      <source src="your-music-file.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
    <button id="music-control" onclick="toggleMusic()">Pause</button>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 50px;
}

.music-player {
  margin-top: 20px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

JavaScript (script.js)

javascript
window.onload = function() {
  const music = document.getElementById('background-music');
  music.play();
};

function toggleMusic() {
  const music = document.getElementById('background-music');
  const controlButton = document.getElementById('music-control');

  if (music.paused) {
    music.play();
    controlButton.textContent = 'Pause';
  } else {
    music.pause();
    controlButton.textContent = 'Play';
  }
}

Explanation

HTML:
- The <audio> element with id="background-music" will play your music file (your-music-file.mp3) in a loop.
- The button element allows users to toggle the music between play and pause.
CSS:
- Basic styles are applied for a clean appearance. The button is styled for better visibility and usability.
JavaScript:
- The script automatically starts playing the music when the page loads (window.onload function).
- The toggleMusic function handles the play/pause functionality by checking if the music is currently paused and updating the button text accordingly.

Adding More Music

To add more music tracks later, you can either replace the source file in the HTML or use a playlist feature in JavaScript, allowing users to select between different tracks. Here's a basic example of adding multiple tracks:

Updated HTML for Multiple Tracks

html
<div class="music-player">
  <audio id="background-music" loop>
    <source id="audio-source" src="track1.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>
  <button id="music-control" onclick="toggleMusic()">Pause</button>
  
  <select id="track-selector" onchange="changeTrack()">
    <option value="track1.mp3">Track 1</option>
    <option value="track2.mp3">Track 2</option>
    <option value="track3.mp3">Track 3</option>
  </select>
</div>

Updated JavaScript for Multiple Tracks

javascript
window.onload = function() {
  const music = document.getElementById('background-music');
  music.play();
};

function toggleMusic() {
  const music = document.getElementById('background-music');
  const controlButton = document.getElementById('music-control');

  if (music.paused) {
    music.play();
    controlButton.textContent = 'Pause';
  } else {
    music.pause();
    controlButton.textContent = 'Play';
  }
}

function changeTrack() {
  const trackSelector = document.getElementById('track-selector');
  const newTrack = trackSelector.value;
  const audioSource = document.getElementById('audio-source');
  
  audioSource.src = newTrack;
  document.getElementById('background-music').load();
  document.getElementById('background-music').play();
}

Summary

The basic structure allows for automatic playback of a single track.
With slight modifications, you can add a track selector to allow users to pick different tracks.
The music will loop by default, and users can pause/resume the music using the provided button.

sWebCode

AD