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="https://img.mtsws.cn/LightPicture/2023/08/45f935a39d0189c0.mp3" 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悬浮音乐播放器，先来看看一下效果图。

如何在自己的网站上添加HTML悬浮音乐播放器呢？今天和你们分享

首先申明三点：

1、本播放器实际上是调用网易云音乐的音乐进行播放，音乐版权归网易云音乐所有，仅供个人学习研究，用于商用的后果自负！

2、本播放器的演示效果可以在我的博客首页看到，默认支持所有Html和PHP环境的网站。

3、本播放器可以使用电脑、手机、IPAD等设备访问，自适应。）

具体的操作方法：

在网站源文件中（如果有单独的页脚文件，也可以放在页脚文件里面）添加这三行代码：

然后保存发布，在浏览器刷新网页就看到效果了

家好，今天给大家介绍一款，调用酷狗搜索音乐播放API实例html页面源码（图1），实现搜索和音乐播放。送给大家哦，获取方式在本文末尾，需要的朋友可以下载学习

图1

搜索结构显示后，点击播放按钮即可播放，同时会显示歌词，歌词可以关闭，同时可以控制播放模式（图2）

图2

本模板编码：10107，需要的朋友，点击下面的链接后，搜索10107，即可获取。

就爱UI - 分享UI设计的点点滴滴

在线咨询

上一篇：前端：JS延长加载的方式有哪些？
下一篇：css实现常用的开关按钮功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

html多页面实现背景音乐的连续播放，简单处理笔记

index.html

page2.html

您的项目需求