在網頁中實現音樂播放功能，可以使用HTML5的標簽，當用戶切換頁面時，音樂可能會停止播放，這是因為瀏覽器為了節(jié)省資源，會暫停非活動標簽頁的音頻播放，為了解決這個問題，我們可以使用JavaScript監(jiān)聽頁面切換事件，并在事件觸發(fā)時暫?；蚧謴鸵魳凡シ?。

以下是一個簡單的示例，展示了如何在切換頁面時保持音樂播放：

1、創(chuàng)建一個HTML文件，添加標簽和一些基本元素：

    
    
    


    
音樂播放示例
    
    播放音樂
    暫停音樂
    

請將yourmusicfile.mp3替換為你的音樂文件路徑。

2、接下來，創(chuàng)建一個名為main.js的JavaScript文件，并添加以下代碼：

const music = document.getElementById('music');
let isPlaying = false;
function playMusic() {
    if (!isPlaying) {
        music.play();
        isPlaying = true;
    }
}
function pauseMusic() {
    if (isPlaying) {
        music.pause();
        isPlaying = false;
    }
}

這段代碼首先獲取標簽的引用，然后定義了一個布爾變量isPlaying來表示音樂是否正在播放。playMusic()和pauseMusic()函數分別用于控制音樂的播放和暫停。

3、為了讓音樂在切換頁面時保持播放，我們需要監(jiān)聽瀏覽器的visibilitychange事件，這個事件會在頁面從可見變?yōu)椴豢梢娀驈牟豢梢娮優(yōu)榭梢姇r觸發(fā)，我們可以通過修改document對象的visibilityState屬性來判斷頁面是否處于活動狀態(tài)，當頁面不可見時，我們將暫停音樂；當頁面重新變?yōu)榭梢姇r，我們將恢復音樂播放，為此，我們需要在main.js文件中添加以下代碼：

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        pauseMusic();
    } else {
        playMusic();
    }
});

4、確保你的音樂文件路徑正確，并在瀏覽器中打開HTML文件，現在，當你點擊“播放音樂”按鈕時，音樂應該開始播放；當你切換到其他標簽頁時，音樂仍然會繼續(xù)播放，當你切換回該標簽頁時，音樂將繼續(xù)播放，當你點擊“暫停音樂”按鈕時，音樂將暫停播放，當你再次切換到其他標簽頁時，音樂將不會停止。

通過以上步驟，你可以輕松地實現在切換頁面時保持音樂播放的功能，請注意，這種方法可能不適用于所有瀏覽器，因為某些瀏覽器可能不支持visibilitychange事件，在這種情況下，你可以嘗試使用其他方法，如輪詢或Web Workers。

分享名稱：html如何在切換頁時歌曲也不停止
瀏覽地址：http://www.dlmjj.cn/article/djihgig.html