音頻仍在播放，儘量減少iPad瀏覽器Safari瀏覽器

Question

我開發的遊戲是html5，jquery，Javascript，我需要預載幾個音頻。這些音頻正在逐一播放，但是當我最小化iPad時，音頻仍然在付費。 任何人都可以幫助暫停音頻，而瀏覽器將盡量減少。當瀏覽器到達前臺時音頻應該播放。

Answer 1

我在那裏得到一個完整的解決方案。這是我到目前爲止：

var audio = document.getElementsByTagName('audio')[0]; 
window.onpageshow = function() { 
    audio.play(); 
} 
window.onpagehide = function() { 
    audio.pause(); 
} 

所以，只要您在應用程序選項卡上關閉Safari時，它會暫停音頻。當你開始備份時播放它。當您更改標籤時它不會停止。

如果您的應用程序是apple-mobile-web-app-capable，則當您使用主屏幕按鈕打開該應用程序時，將會觸發onpageshow，並在您關閉它時暫停該應用程序。它並沒有完全停頓，因爲重新開放它迫使它從頭開始。您必須使用localStorage或其他東西來捕捉您在軌道中的位置，然後在打開備份時設置currentTime。

看起來你可以根據caniuse.com

只是對歷史的緣故，我將至少狀態的一些其他的事情我想在iOS的7使用Visibility API。

• window.onblur

• 使用requestAnimationFrame用的setTimeout（這個工作在桌面上，而不是iOS版）

  var t; 
  requestAnimationFrame(function checkWindow() { 
      if (audio.paused) { 
       audio.play(); 
      } 
      clearTimeout(t); 
      t = setTimeout(function() { 
       audio.pause(); 
      }, 32); 
  }); 
  

Answer 2

希望我沒有遲到回答。我發現下面的解決方案，它在臺式電腦和iOS設備的工作原理（尚未在Android的檢查還）

$(window).on("blur focus", function(e) { 
var prevType = $(this).data("prevType"); 

if (prevType != e.type) { // reduce double fire issues 
    switch (e.type) { 
     case "blur": 
      // do work 
      your_audio.pause(); 
      break; 

     case "focus": 
      // do work 
      your_audio.play(); 
      break; 
    } 
} 

$(this).data("prevType", e.type); 
}) 

PS：your_audio是一個變量，你必須定義它。

我發現這個解決方案here

Answer 3

我建議你使用page visibility API，它給你，告訴你，當一個頁面的可見性更改的事件。你認爲合適的

function handleVisibilityChange() { 
    if (document.hidden){ 
     stopAllSounds(); 
    }else{ 
     playAllSounds(); 
    } 
} 

document.addEventListener("visibilitychange", handleVisibilityChange, false); 

stopAllSounds和playAllSounds將被定義，但在Safari瀏覽器的最小化和最大化這一事件將觸發。它適用於Android設備和all modern platforms