html多頁面實現(xiàn)背景音樂的連續(xù)播放，簡單處理筆記

在多個HTML頁面之間切換時持續(xù)播放背景音樂，可以使用JavaScript和localStorage來實現(xiàn)。這里有一個簡單的實現(xiàn)方案：

創(chuàng)建一個隱藏的音頻播放器: 在每個HTML頁面的<body>標(biāo)簽內(nèi)添加一個隱藏的音頻標(biāo)簽，并設(shè)置自動播放和循環(huán)播放屬性。

使用JavaScript控制音頻狀態(tài): 當(dāng)頁面加載時，檢查localStorage中是否有音樂正在播放的狀態(tài)，如果有，則恢復(fù)播放。同時，當(dāng)頁面離開時，記錄音樂的播放狀態(tài)到localStorage。

下面是一個簡化版的多頁面背景音樂連續(xù)播放的Demo示例。這個例子包含兩個HTML文件：index.html 和 page2.html。請確保你有相應(yīng)的音頻文件（如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>這是首頁，背景音樂會持續(xù)播放。</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>切換到第二頁，背景音樂仍然連續(xù)播放。</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函數(shù)，確保音樂播放邏輯一致
    function setupMusic(audio) {/*...函數(shù)內(nèi)容與上文相同...*/}
</script>
</body>
</html>

在這個示例中，index.html 和 page2.html 都包含了相同的JavaScript邏輯來管理背景音樂的播放狀態(tài)和時間。當(dāng)用戶在頁面間導(dǎo)航時，音樂將會無縫繼續(xù)播放，而不是重新開始。請根據(jù)實際需要調(diào)整音頻文件路徑和其他細(xì)節(jié)。

音頻是網(wǎng)頁承載內(nèi)容很重要的一個元素，也是必不可少的網(wǎng)頁表現(xiàn)形式（圖、文、表、視、音）之一。缺少聲音的網(wǎng)站，就如同人不能說話一樣。曾經(jīng)網(wǎng)頁要想播放音頻，必須得用第三方插件flash。隨著html5標(biāo)準(zhǔn)逐漸普及，如今幾乎所有的瀏覽器都使用html5來播放音頻。

目標(biāo)

如何設(shè)置音頻播放？
支持哪幾種音頻格式？

音頻播放標(biāo)簽--audio

作用是在 HTML 頁面中嵌入音頻元素，來播放聲音文件或者音頻流。

網(wǎng)頁版的音樂播放器

audio標(biāo)簽的屬性

src 音頻的播放源（必須）

controls 瀏覽器自帶的控制條（必須）

autoplay 自動播放

loop 循環(huán)播放

preload 預(yù)加載

音頻代碼

每一種瀏覽器自帶的音頻播放控制器都不一樣，但功能都一樣。網(wǎng)上看到的播放器，大多數(shù)都是改過它的樣式。

瀏覽器自帶的音頻控制條

支持多個格式--source標(biāo)簽

<audio> 元素支持三種視頻格式： MP4, WebM, 和 Ogg。

如果不確定音頻格式是哪個格式，可以使用source標(biāo)簽。<source> 元素可以鏈接不同格式的視頻文件，瀏覽器將使用第一個可識別的格式。

支持多種格式

總結(jié)

audio總結(jié)

能是出于節(jié)省用戶流量，許多移動端瀏覽器都不支持H5自動播放視頻，必須在用戶主動交互（點擊或者滑動等）后才可以通過js播放視頻

PC端可以通過設(shè)置muted，自動播放靜音視頻

安卓瀏覽器均不支持自動播放，實測在微信內(nèi)置瀏覽器，滑動視為交互行為，可以在這之后播放視頻，抖音內(nèi)置瀏覽器則需要點擊交互，鴻蒙系統(tǒng)瀏覽器可以自動播放靜音視頻

解決方案

法一引導(dǎo)用戶點擊或滑動

進(jìn)入網(wǎng)站時彈窗，例如歡迎語等，用戶點擊關(guān)閉后執(zhí)行視頻播放
簡單粗暴的方法，在某些場景時適用的，實測在安卓、鴻蒙、IOS、抖音瀏覽器等均可以用這個方法解決

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

【更多音視頻學(xué)習(xí)資料，點擊下方鏈接免費領(lǐng)取↓↓，先碼住不迷路~】

點擊領(lǐng)取→音視頻開發(fā)基礎(chǔ)知識和資料包

法二 jsmpeg

將視頻轉(zhuǎn)成ts格式，通過jsmpeg解碼器進(jìn)行加載播放，可以實現(xiàn)自動播放，實測基本上可以解決所有移動端無法播放視頻的問題

轉(zhuǎn)ts

安裝ffmpeg，輸入命令將mp4轉(zhuǎn)成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, // 循環(huán)播放
autoplay: true, // 自動播放
audio: false, // 禁用音頻
});
player.play();
</script>
</body>
</html>

其他問題

移動端自動全屏播放視頻

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

如果你對音視頻開發(fā)感興趣，覺得文章對您有幫助，別忘了點贊、收藏哦！或者對本文的一些闡述有自己的看法，有任何問題，歡迎在下方評論區(qū)討論！

在線咨詢

上一篇：30 個純 HTML5 實現(xiàn)的游戲
下一篇：ajax一切正常卻出不來結(jié)果怎么辦？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商