頁面進入后臺如何關閉背景音樂

Travis 發布于2019-08-26 10:18 / 2398人閱讀

摘要：之前在做小程序的時候遇到一個問題小程序中有一個頁面，這個頁面中用嵌套了一個頁面，這個頁面中有背景音樂，背景音樂播放的情況下，點擊小程序右上角退出的小圓圈背景音樂仍然播放。

之前在做小程序的時候遇到一個問題：小程序中有一個webview頁面，這個頁面中用iframe嵌套了一個H5頁面，這個H5頁面中有背景音樂，背景音樂播放的情況下，點擊小程序右上角退出的小圓圈背景音樂仍然播放。

預期效果：點擊小程序退出后背景音樂停止播放，再次打開小程序后背景音樂繼續播放，如果用戶停止了音樂，退出再次打開時背景音樂仍然是停止狀態

思路過程：因為H5頁面是嵌套的，音樂在H5頁面中，無法通過小程序的生命周期去控制音樂的播放狀態，所以如何能在H5頁面中監聽頁面的顯隱藏狀態去控制音樂

visibilitychange：瀏覽器標簽頁被隱藏或顯示的時候會觸發

適用場景：

瀏覽器標簽頁切換時觸發

微信環境下切成浮窗狀態觸發

小程序嵌套頁面，小程序切換頁面或進入后臺觸發

其他頁面顯隱切換時觸發

解決方案：

let statusBeforeHide = true; // 記錄頁面切換到后臺時音樂的播放狀態，如果用戶進行了音樂關閉操作，則將該狀態置為false
// document.hidden boolean 頁面當前是否不可見
let hiddenProperty = ("hidden" in document) ? "hidden"
        : ("webkitHidden" in document) ? "webkitHidden"
            : ("mozHidden" in document) ? "mozHidden" : null;
if (hiddenProperty) {
    let visibilityChangeEvent = hiddenProperty.replace(/hidden/i, "visibilitychange");
    let onVisibilityChange = () => {
        console.log("visibilityChange");
        changePlay();
    };
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
} else {
    console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}

// 更改音樂播放狀態
function changePlay() {
    if (document[hiddenProperty]) {
        // 頁面隱藏
        if (statusBeforeHide) {
            music.pause(); // 偽代碼，音樂暫停，但不改變statusBeforeHide
        }
    } else {
        // 頁面顯示
        if (statusBeforeHide) {
            music.play() // 偽代碼，如果statusBeforeHide是true,音樂繼續播放
        }
    }
}

拓展：
1.可在頁面后臺運行時清掉一些定時器，頁面顯示時再重新設置定時器，節省性能

云服務器 GPU云服務器如何進入asp后臺如何js關閉某個頁面進入域名管理頁面怎么進入后臺

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105943.html

頁面進入后臺如何關閉背景音樂

摘要：之前在做小程序的時候遇到一個問題小程序中有一個頁面，這個頁面中用嵌套了一個頁面，這個頁面中有背景音樂，背景音樂播放的情況下，點擊小程序右上角退出的小圓圈背景音樂仍然播放。之前在做小程序的時候遇到一個問題：小程序中有一個webview頁面，這個頁面中用iframe嵌套了一個H5頁面，這個H5頁面中有背景音樂，背景音樂播放的情況下，點擊小程序右上角退出的小圓圈背景音樂仍然播放。預期效果...

abson 2019-08-26 10:38 評論0 收藏0
從URL輸入到頁面展現到底發生什么？

摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網址后，首先要經過域名解析，因為瀏覽器并不能直接通過域名找到對應的服務器，而是要通過地址。什么是域名解析協議提供通過域名查找地址，或逆向從地址反查域名的服務。前言打開瀏覽器從輸入網址到網頁呈現在大家面前，背后到底發生了什么？經歷怎么樣的一個過程？先給大家來張總體流程圖，具體步驟請看下文分解！本文首發地址為GitHub博客,寫文章不易，請多多支...

elva 2019-08-23 13:46 評論0 收藏0
從URL輸入到頁面展現到底發生什么？

摘要：定義文檔資源的名稱二域名解析在瀏覽器輸入網址后，首先要經過域名解析，因為瀏覽器并不能直接通過域名找到對應的服務器，而是要通過地址。什么是域名解析協議提供通過域名查找地址，或逆向從地址反查域名的服務。前言打開瀏覽器從輸入網址到網頁呈現在大家面前，背后到底發生了什么？經歷怎么樣的一個過程？先給大家來張總體流程圖，具體步驟請看下文分解！本文首發地址為GitHub博客,寫文章不易，請多多支...

WrBug 2019-08-02 12:07 評論0 收藏0
微信小程序知識總結及案例集錦

摘要：對微信小程序進行全局配置，決定頁面文件的路徑窗口表現設置網絡超時時間設置多等。微信小程序知識總結及案例集錦微信小程序的發展會和微信公眾號一樣，在某個時間點爆發學習路徑微信小程序最好的教程肯定是官方的文檔啦，點擊這里直達微信官方文檔認真跟著文檔看一遍，相信有vue前端經驗的看下應該就能上手了，然后安裝微信小程序開發者工具新建一個quick start項目，了解代碼結構，...

sean 2019-08-20 17:45 評論0 收藏0