首页h5网页跳转下一个网页音乐继续播放完整代码

h5网页跳转下一个网页音乐继续播放完整代码

时间: 2023-08-31 07:01:33 浏览: 81

以下是一个完整的示例代码，用于在H5网页跳转到下一个网页时保持音乐的播放： ```html <!DOCTYPE html> <html> <head> <title>音乐播放示例</title> </head> <body> <audio id="bg-music" src="music.mp3" autoplay loop></audio> <button id="music-toggle">切换音乐</button> <script> var isMusicPlaying = true; // 音乐播放状态，默认为播放 // 页面加载完成时执行 window.addEventListener('load', function() { var audio = document.getElementById('bg-music'); // 切换页面时执行 window.addEventListener('beforeunload', function() { // 暂停音乐 if (isMusicPlaying) { audio.pause(); } }); // 页面重新加载时执行 window.addEventListener('load', function() { // 恢复音乐播放 if (isMusicPlaying) { audio.play(); } }); }); var musicToggle = document.getElementById('music-toggle'); musicToggle.addEventListener('click', function() { var audio = document.getElementById('bg-music'); if (isMusicPlaying) { audio.pause(); isMusicPlaying = false; musicToggle.textContent = '开启音乐'; } else { audio.play(); isMusicPlaying = true; musicToggle.textContent = '关闭音乐'; } }); </script> </body> </html> ``` 请将上述代码保存为一个HTML文件，并将音乐文件路径替换为您要使用的音乐文件。然后，您可以在浏览器中打开该HTML文件，测试在H5网页跳转到下一个网页时音乐是否会继续播放，并使用切换音乐按钮来控制音乐的播放和暂停。