Autoplay background music: <audio src="bgm.mp3" autoplay loop></audio>

Basic Implementation of Background Music Auto-Play

Adding background music to a webpage and enabling auto-play can be easily achieved using the HTML5 <audio> element. The simplest implementation is as follows:

<audio src="bgm.mp3" autoplay loop></audio>

This code will automatically play an audio file named "bgm.mp3" when the page loads and set it to loop mode. The autoplay attribute controls auto-play, and the loop attribute controls looping.

Audio File Formats and Browser Compatibility

Different browsers support different audio formats. To ensure cross-browser compatibility, it is recommended to provide multiple audio file formats:

<audio autoplay loop>
  <source src="bgm.mp3" type="audio/mpeg">
  <source src="bgm.ogg" type="audio/ogg">
  <source src="bgm.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

Common audio format support:

• MP3: Supported by all modern browsers
• OGG: Supported by Firefox, Chrome, and Opera
• WAV: Supported by newer browsers

Auto-Play Policies and Browser Restrictions

Modern browsers impose strict restrictions on auto-play, especially Chrome and others, which require:

1. User interaction with the page (e.g., a click) before audio can auto-play
2. Mobile devices typically completely prohibit auto-play

Solutions to bypass restrictions:

document.addEventListener('click', function() {
  const audio = document.querySelector('audio');
  audio.play().catch(e => console.log('Playback failed:', e));
});

Or use more complex interaction detection:

window.addEventListener('load', function() {
  const audio = document.querySelector('audio');
  
  function attemptPlay() {
    audio.play()
      .then(() => {
        // Playback successful
      })
      .catch(error => {
        // Playback failed, may require user interaction
        document.body.addEventListener('click', function once() {
          attemptPlay();
          document.body.removeEventListener('click', once);
        });
      });
  }
  
  attemptPlay();
});

Volume Control and Mute Options

To enhance user experience, provide volume control and mute options:

<audio id="bgm" src="bgm.mp3" autoplay loop></audio>
<div>
  <button onclick="document.getElementById('bgm').volume += 0.1">Volume +</button>
  <button onclick="document.getElementById('bgm').volume -= 0.1">Volume -</button>
  <button onclick="document.getElementById('bgm').muted = !document.getElementById('bgm').muted">
    Mute/Unmute
  </button>
</div>

Responsive Audio Design

Different devices may require different audio handling:

// Detect mobile devices
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

if (isMobile) {
  // Special handling for mobile devices
  const audio = document.querySelector('audio');
  audio.removeAttribute('autoplay');
  
  const playButton = document.createElement('button');
  playButton.textContent = 'Play Background Music';
  playButton.onclick = () => audio.play();
  document.body.appendChild(playButton);
}

Audio Preloading Optimization

To reduce latency, preload the audio:

<audio id="bgm" autoplay loop preload="auto">
  <source src="bgm.mp3" type="audio/mpeg">
</audio>

preload attribute options:

• auto: Browser should preload the audio
• metadata: Only preload metadata
• none: Do not preload

Multi-Scene Background Music Switching

Example of switching music for different scenes:

<audio id="bgm" autoplay loop></audio>

<button onclick="changeBGM('forest.mp3')">Forest Scene</button>
<button onclick="changeBGM('city.mp3')">City Scene</button>
<button onclick="changeBGM('ocean.mp3')">Ocean Scene</button>

<script>
function changeBGM(src) {
  const audio = document.getElementById('bgm');
  audio.pause();
  audio.src = src;
  audio.play().catch(e => console.log('User interaction required to play'));
}
</script>

Audio Visualization and Advanced Control

Use the Web Audio API for more advanced audio control:

<audio id="bgm" src="bgm.mp3" autoplay loop></audio>
<canvas id="visualizer" width="300" height="100"></canvas>

<script>
const audio = document.getElementById('bgm');
const canvas = document.getElementById('visualizer');
const ctx = canvas.getContext('2d');

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioCtx.createAnalyser();
const source = audioCtx.createMediaElementSource(audio);

source.connect(analyser);
analyser.connect(audioCtx.destination);
analyser.fftSize = 256;

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);
  
  ctx.fillStyle = 'rgb(0, 0, 0)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;
  
  for(let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i] / 2;
    ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }
}

audio.addEventListener('play', () => {
  audioCtx.resume().then(() => {
    draw();
  });
});
</script>

Background Music and Page State Synchronization

Control music playback based on page visibility:

document.addEventListener('visibilitychange', function() {
  const audio = document.querySelector('audio');
  if (document.hidden) {
    audio.pause();
  } else {
    audio.play().catch(e => console.log('Resume playback failed'));
  }
});

Local Storage for User Preferences

Remember user volume and mute settings:

// Save settings
function saveAudioSettings() {
  const audio = document.getElementById('bgm');
  localStorage.setItem('bgmVolume', audio.volume);
  localStorage.setItem('bgmMuted', audio.muted);
}

// Load settings
function loadAudioSettings() {
  const audio = document.getElementById('bgm');
  const savedVolume = localStorage.getItem('bgmVolume');
  const savedMuted = localStorage.getItem('bgmMuted');
  
  if (savedVolume !== null) audio.volume = parseFloat(savedVolume);
  if (savedMuted !== null) audio.muted = savedMuted === 'true';
}

// Save on volume/mute changes
document.getElementById('bgm').addEventListener('volumechange', saveAudioSettings);
document.getElementById('bgm').addEventListener('pause', saveAudioSettings);
document.getElementById('bgm').addEventListener('play', saveAudioSettings);

// Restore settings on page load
window.addEventListener('load', loadAudioSettings);

Background Music and Animation Synchronization

Sync music playback with page animations:

<audio id="bgm" src="bgm.mp3" autoplay loop></audio>
<div id="animatedElement" style="width:100px;height:100px;background:red;"></div>

<script>
const audio = document.getElementById('bgm');
const element = document.getElementById('animatedElement');

audio.addEventListener('timeupdate', function() {
  // Change animation based on current playback time
  const progress = audio.currentTime / audio.duration;
  element.style.transform = `rotate(${progress * 360}deg)`;
  
  // Change size based on volume
  element.style.width = `${100 + (audio.volume * 100)}px`;
  element.style.height = `${100 + (audio.volume * 100)}px`;
});
</script>

Background Music Playlist

Loop through multiple background tracks:

<audio id="bgm"></audio>

<script>
const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;
const audio = document.getElementById('bgm');

function playTrack(trackIndex) {
  audio.src = playlist[trackIndex];
  audio.play().catch(e => console.log('User interaction required to play'));
}

audio.addEventListener('ended', function() {
  currentTrack = (currentTrack + 1) % playlist.length;
  playTrack(currentTrack);
});

// Start playing the first track
playTrack(0);
</script>

Background Music Loading Status Feedback

Display music loading status to users:

<audio id="bgm" src="bgm.mp3" autoplay loop></audio>
<div id="loadingStatus">Loading...</div>

<script>
const audio = document.getElementById('bgm');
const statusDiv = document.getElementById('loadingStatus');

audio.addEventListener('loadstart', () => {
  statusDiv.textContent = 'Starting to load audio...';
});

audio.addEventListener('progress', () => {
  statusDiv.textContent = 'Loading audio...';
});

audio.addEventListener('canplay', () => {
  statusDiv.textContent = 'Audio ready to play';
  setTimeout(() => {
    statusDiv.style.display = 'none';
  }, 2000);
});

audio.addEventListener('error', () => {
  statusDiv.textContent = 'Audio loading failed';
});
</script>

Background Music and Video Synchronization

Sync background music with video playback:

<video id="myVideo" src="video.mp4" controls></video>
<audio id="bgm" src="bgm.mp3"></audio>

<script>
const video = document.getElementById('myVideo');
const audio = document.getElementById('bgm');

video.addEventListener('play', () => {
  audio.currentTime = video.currentTime % audio.duration;
  audio.play().catch(e => console.log('User interaction required to play'));
});

video.addEventListener('pause', () => {
  audio.pause();
});

video.addEventListener('seeked', () => {
  audio.currentTime = video.currentTime % audio.duration;
});

video.addEventListener('ratechange', () => {
  audio.playbackRate = video.playbackRate;
});
</script>

Background Music Playback Quality Control

Select audio quality based on network conditions:

function getNetworkQuality() {
  return navigator.connection 
    ? navigator.connection.downlink 
    : 5; // Default assumption: good network
}

function selectAudioQuality() {
  const quality = getNetworkQuality();
  const audio = document.getElementById('bgm');
  
  if (quality < 1) {
    audio.src = 'bgm-low.mp3'; // Low-quality version
  } else if (quality < 3) {
    audio.src = 'bgm-medium.mp3'; // Medium quality
  } else {
    audio.src = 'bgm-high.mp3'; // High quality
  }
  
  audio.play().catch(e => console.log('User interaction required to play'));
}

window.addEventListener('load', selectAudioQuality);

// Listen for network changes
navigator.connection?.addEventListener('change', selectAudioQuality);

Background Music Playback Time Limit

Limit daily background music playback time:

function getTodayKey() {
  const today = new Date();
  return `bgm-last-played-${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
}

function canPlayToday() {
  const lastPlayed = localStorage.getItem(getTodayKey());
  if (!lastPlayed) return true;
  
  const lastPlayedTime = parseInt(lastPlayed);
  const now = new Date().getTime();
  const hoursSinceLastPlay = (now - lastPlayedTime) / (1000 * 60 * 60);
  
  return hoursSinceLastPlay >= 24; // Minimum 24-hour interval
}

function playWithDailyLimit() {
  if (canPlayToday()) {
    const audio = document.getElementById('bgm');
    audio.play().catch(e => console.log('User interaction required to play'));
    localStorage.setItem(getTodayKey(), new Date().getTime().toString());
  } else {
    alert('You have already listened to background music today. Please come back tomorrow.');
  }
}

document.getElementById('playButton').addEventListener('click', playWithDailyLimit);