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設計的點點滴滴

在線咨詢

上一篇：wordpress網站模板中，怎樣添加和調用公共頭部模板？#學浪計劃#
下一篇：LG V60 ThinQ具有雙屏顯示功能–如此逼真

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html多頁面實現背景音樂的連續播放，簡單處理筆記

index.html

page2.html

您的項目需求