前言：
当前同学们对“html播放音乐代码控制播放”都比较看重，各位老铁们都想要学习一些“html播放音乐代码控制播放”的相关资讯。那么小编同时在网络上搜集了一些关于“html播放音乐代码控制播放””的相关文章，希望兄弟们能喜欢，兄弟们一起来学习一下吧！要在多个HTML页面之间切换时持续播放背景音乐，可以使用JavaScript和localStorage来实现。这里有一个简单的实现方案：
创建一个隐藏的音频播放器: 在每个HTML页面的<body>标签内添加一个隐藏的音频标签，并设置自动播放和循环播放属性。使用JavaScript控制音频状态: 当页面加载时，检查localStorage中是否有音乐正在播放的状态，如果有，则恢复播放。同时，当页面离开时，记录音乐的播放状态到localStorage。
下面是一个简化版的多页面背景音乐连续播放的Demo示例。这个例子包含两个HTML文件：index.html 和 page2.html。请确保你有相应的音频文件（如music.mp3）并放置在与HTML文件相同的目录下。
index.html
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>首页</title> <style> #backgroundMusic { display: none; } </style> </head> <body> <h1>首页</h1> <p>这是首页，背景音乐会持续播放。</p> <a href="page2.html">前往第二页</a> <audio controls id="backgroundMusic" loop> <source src="; type="audio/mpeg" /> 您的浏览器不支持 audio 元素。 </audio> <script> document.addEventListener('DOMContentLoaded', function () { var audio = document.getElementById('backgroundMusic') setupMusic(audio) }) function setupMusic(audio) { var musicTime = parseFloat(localStorage.getItem('musicTime')) || 0 var isPlaying = localStorage.getItem('musicPlaying') === 'true' audio.currentTime = musicTime if (isPlaying) { audio.play().catch(function (error) { console.error('自动播放被阻止:', error) }) } audio.onplay = function () { localStorage.setItem('musicPlaying', true) } audio.onpause = function () { localStorage.setItem('musicPlaying', false) } audio.ontimeupdate = function () { localStorage.setItem('musicTime', audio.currentTime) } } </script> </body></html>page2.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第二页</title> <style> #backgroundMusic { display: none; } </style></head><body><h1>第二页</h1><p>切换到第二页，背景音乐仍然连续播放。</p><a href="index.html">返回首页</a><audio id="backgroundMusic" src="music.mp3" loop></audio><script> document.addEventListener('DOMContentLoaded', function() { var audio = document.getElementById('backgroundMusic'); setupMusic(audio); }); // 与index.html中相同的setupMusic函数，确保音乐播放逻辑一致 function setupMusic(audio) {/*...函数内容与上文相同...*/}</script></body></html>在这个示例中，index.html 和 page2.html 都包含了相同的JavaScript逻辑来管理背景音乐的播放状态和时间。当用户在页面间导航时，音乐将会无缝继续播放，而不是重新开始。请根据实际需要调整音频文件路径和其他细节。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html播放音乐代码控制播放
