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

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

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

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

下面是一個(gè)簡(jiǎn)化版的多頁(yè)面背景音樂(lè)連續(xù)播放的Demo示例。這個(gè)例子包含兩個(gè)HTML文件：index.html 和 page2.html。請(qǐng)確保你有相應(yīng)的音頻文件（如music.mp3）并放置在與HTML文件相同的目錄下。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>首頁(yè)</title>
        <style>
            #backgroundMusic {
                display: none;
            }
        </style>
    </head>
    <body>
        <h1>首頁(yè)</h1>
        <p>這是首頁(yè)，背景音樂(lè)會(huì)持續(xù)播放。</p>
        <a href="page2.html">前往第二頁(yè)</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('自動(dòng)播放被阻止:', 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>第二頁(yè)</title>
    <style>
        #backgroundMusic { display: none; }
    </style>
</head>
<body>

<h1>第二頁(yè)</h1>
<p>切換到第二頁(yè)，背景音樂(lè)仍然連續(xù)播放。</p>
<a href="index.html">返回首頁(yè)</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ù)，確保音樂(lè)播放邏輯一致
    function setupMusic(audio) {/*...函數(shù)內(nèi)容與上文相同...*/}
</script>
</body>
</html>

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

了美化網(wǎng)站，我在網(wǎng)站上面添加了一個(gè)HTML懸浮音樂(lè)播放器，先來(lái)看看一下效果圖。

如何在自己的網(wǎng)站上添加HTML懸浮音樂(lè)播放器呢？今天和你們分享

首先申明三點(diǎn)：

1、本播放器實(shí)際上是調(diào)用網(wǎng)易云音樂(lè)的音樂(lè)進(jìn)行播放，音樂(lè)版權(quán)歸網(wǎng)易云音樂(lè)所有，僅供個(gè)人學(xué)習(xí)研究，用于商用的后果自負(fù)！

2、本播放器的演示效果可以在我的博客首頁(yè)看到，默認(rèn)支持所有Html和PHP環(huán)境的網(wǎng)站。

3、本播放器可以使用電腦、手機(jī)、IPAD等設(shè)備訪問(wèn)，自適應(yīng)。）

具體的操作方法：

在網(wǎng)站源文件中（如果有單獨(dú)的頁(yè)腳文件，也可以放在頁(yè)腳文件里面）添加這三行代碼：

然后保存發(fā)布，在瀏覽器刷新網(wǎng)頁(yè)就看到效果了

家好，今天給大家介紹一款，調(diào)用酷狗搜索音樂(lè)播放API實(shí)例html頁(yè)面源碼（圖1），實(shí)現(xiàn)搜索和音樂(lè)播放。送給大家哦，獲取方式在本文末尾，需要的朋友可以下載學(xué)習(xí)

圖1

搜索結(jié)構(gòu)顯示后，點(diǎn)擊播放按鈕即可播放，同時(shí)會(huì)顯示歌詞，歌詞可以關(guān)閉，同時(shí)可以控制播放模式（圖2）

圖2

本模板編碼：10107，需要的朋友，點(diǎn)擊下面的鏈接后，搜索10107，即可獲取。

就愛(ài)UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴

在線咨詢

上一篇：前端：JS延長(zhǎng)加載的方式有哪些？
下一篇：css實(shí)現(xiàn)常用的開(kāi)關(guān)按鈕功能

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

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

index.html

page2.html

您的項(xiàng)目需求