网站添加背景音乐完整代码（自动播放 + 控制按钮）
代码使用说明
1. 替换音乐文件
把代码里的 background-music.mp3 换成你自己的音乐路径 / 链接：
本地音乐：直接写文件名（如
music.mp3），把音乐和网页放在同一个文件夹在线音乐：直接粘贴网络 MP3 地址（必须是直接能下载播放的音频链接）
2. 核心功能
✅ 自动播放：页面加载自动播放（兼容浏览器限制）
✅ 循环播放：音乐无限循环，不会停止
✅ 固定按钮：右下角悬浮圆形按钮，不影响页面布局
✅ 状态切换：点击按钮播放 / 暂停，图标自动切换
✅ 全浏览器兼容：支持 Chrome、Edge、Firefox、Safari 等
3. 浏览器自动播放限制说明
现代浏览器禁止页面无操作自动播放声音，所以代码做了兼容处理：
先静音启动播放，再立刻解除静音，90% 情况下可以正常自动播放
如果依然被限制，用户点击一下页面任意位置就能播放
点击按钮可以强制播放，完全不受限制
4. 自定义修改（简单易懂）
修改按钮位置：调整
bottom/right数值修改按钮颜色：修改
background颜色值修改按钮大小：调整
width/height去掉循环：删除
<audio>标签里的loop属性html
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>网站背景音乐</title> <style> /* 自定义音乐控制按钮样式 */ .music-btn { position: fixed; /* 固定在页面角落 */ bottom: 20px; /* 距离底部20px */ right: 20px; /* 距离右侧20px */ width: 50px; height: 50px; border-radius: 50%; /* 圆形按钮 */ background: #1677ff; /* 按钮背景色 */ color: white; border: none; font-size: 20px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2); z-index: 9999; /* 保证按钮在最上层 */ } .music-btn:hover { background: #0958d9; /* 鼠标悬浮变色 */ } </style></head><body> <!-- 音频标签：自动播放、循环、静音启动（解决浏览器自动播放限制） --> <audio id="bgMusic" loop muted preload="auto"> <!-- 替换成你的音乐链接，支持 MP3/WAV/Ogg 格式 --> <source src="background-music.mp3" type="audio/mpeg"> 您的浏览器不支持音频播放 </audio> <!-- 音乐控制按钮 --> <button id="musicBtn" class="music-btn">🔊</button> <script> // 获取音频和按钮元素 const bgMusic = document.getElementById('bgMusic'); const musicBtn = document.getElementById('musicBtn'); let isPlay = false; // 播放状态 // 页面加载后自动尝试播放 window.addEventListener('load', function() { // 解除静音 + 播放 bgMusic.muted = false; bgMusic.play().then(() => { isPlay = true; musicBtn.textContent = '🔊'; // 播放状态图标 }).catch(err => { // 浏览器限制自动播放时，提示用户点击按钮播放 console.log('浏览器限制自动播放，请点击按钮手动播放', err); isPlay = false; musicBtn.textContent = '🔇'; }); }); // 按钮点击切换播放/暂停 musicBtn.addEventListener('click', function() { if (isPlay) { bgMusic.pause(); musicBtn.textContent = '🔇'; // 暂停状态图标 } else { bgMusic.play(); musicBtn.textContent = '🔊'; // 播放状态图标 } isPlay = !isPlay; }); </script></body></html>http://www.fouwan.com
