html5设制的网页在跳转下一个网页时背景音乐持续播放的完整代码
时间: 2024-04-17 09:26:49 浏览: 27
以下是一个完整的示例代码,用于在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();
audio.currentTime = 0; // 重置音乐播放位置
}
});
// 页面重新加载时执行
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网页跳转到下一个网页时背景音乐是否会持续播放,并使用切换音乐按钮来控制音乐的播放和暂停。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)