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逻辑来管理背景音乐的播放状态和时间。当用户在页面间导航时，音乐将会无缝继续播放，而不是重新开始。请根据实际需要调整音频文件路径和其他细节。

音频是网页承载内容很重要的一个元素，也是必不可少的网页表现形式（图、文、表、视、音）之一。缺少声音的网站，就如同人不能说话一样。曾经网页要想播放音频，必须得用第三方插件flash。随着html5标准逐渐普及，如今几乎所有的浏览器都使用html5来播放音频。

目标

如何设置音频播放？
支持哪几种音频格式？

音频播放标签--audio

作用是在 HTML 页面中嵌入音频元素，来播放声音文件或者音频流。

网页版的音乐播放器

audio标签的属性

src 音频的播放源（必须）

controls 浏览器自带的控制条（必须）

autoplay 自动播放

loop 循环播放

preload 预加载

音频代码

每一种浏览器自带的音频播放控制器都不一样，但功能都一样。网上看到的播放器，大多数都是改过它的样式。

浏览器自带的音频控制条

支持多个格式--source标签

<audio> 元素支持三种视频格式： MP4, WebM, 和 Ogg。

如果不确定音频格式是哪个格式，可以使用source标签。<source> 元素可以链接不同格式的视频文件，浏览器将使用第一个可识别的格式。

支持多种格式

总结

audio总结

能是出于节省用户流量，许多移动端浏览器都不支持H5自动播放视频，必须在用户主动交互（点击或者滑动等）后才可以通过js播放视频

PC端可以通过设置muted，自动播放静音视频

安卓浏览器均不支持自动播放，实测在微信内置浏览器，滑动视为交互行为，可以在这之后播放视频，抖音内置浏览器则需要点击交互，鸿蒙系统浏览器可以自动播放静音视频

解决方案

法一引导用户点击或滑动

进入网站时弹窗，例如欢迎语等，用户点击关闭后执行视频播放
简单粗暴的方法，在某些场景时适用的，实测在安卓、鸿蒙、IOS、抖音浏览器等均可以用这个方法解决

close() {
const videos = document.querySelectorAll('video');
for (let i = 0; i < videos.length; i++) {
const element = videos[i];
element.play();
}
}

【更多音视频学习资料，点击下方链接免费领取↓↓，先码住不迷路~】

点击领取→音视频开发基础知识和资料包

法二 jsmpeg

将视频转成ts格式，通过jsmpeg解码器进行加载播放，可以实现自动播放，实测基本上可以解决所有移动端无法播放视频的问题

转ts

安装ffmpeg，输入命令将mp4转成ts

s - 分辨率
b - 码率 b:v代表视频码率 b:a代表音频码率
r - 帧频

ffmpeg.exe -i in.mp4 -f mpegts -codec:v mpeg1video -s 680x1080 -b:v 2074k -r 29.97 out.ts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
// 引入jsmpeg
<script src="./jsmpeg.min.js"></script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" height="750" width="750"></canvas>
<script>
var canvas = document.querySelector("#canvas");
// 加载ts文件
var player = new JSMpeg.Player("./out.ts", {
canvas: canvas,
loop: true, // 循环播放
autoplay: true, // 自动播放
audio: false, // 禁用音频
});
player.play();
</script>
</body>
</html>

其他问题

移动端自动全屏播放视频

<video webkit-playsinline="webkit-playsinline" playsinline></video>

如果你对音视频开发感兴趣，觉得文章对您有帮助，别忘了点赞、收藏哦！或者对本文的一些阐述有自己的看法，有任何问题，欢迎在下方评论区讨论！

在线咨询

上一篇：30 个纯 HTML5 实现的游戏
下一篇：ajax一切正常却出不来结果怎么办？

您的项目需求

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

整合营销服务商