chrome背景选项卡中的自动播放声音

Question

我有一个使用音频通知的 HTML5 游戏。

当用户通过匹配来搜索其他玩家时，他们经常更改标签来做其他事情，并依靠音频通知知道何时回来。在 Chrome（桌面版）更改为禁止音频通知后，这不再有效。

如何确保音频通知仍在后台运行？

Answer 1

对我有用的解决方案是在页面加载后播放一个小的空白声音（0.1 秒就足够了）。之后，即使您切换到另一个选项卡，后台的选项卡仍然可以播放某些外部或内部事件的声音。

Answer 2

示例 1

这是一个示例，它创建了一个 div 并使用 HTML5 <audio> 标记并回退到 <embed>，在单击按钮 3 秒后播放音频文件。

要对其进行测试，请运行示例并单击按钮，然后更改选项卡并计数 3 秒。您应该会在此选项卡上看到扬声器图标，并在 3 秒后听到硬币掉落的声音，即使此选项卡不是当前选项卡。

function playCoinDrop() {
  soundDiv = document.createElement("div");
  soundDiv.innerHTML = '<audio autoplay="autoplay"><source src="http://themushroomkingdom.net/sounds/wav/smw/smw_coin.wav" type="audio/wav" /><embed hidden="true" autostart="true" loop="false" src="http://themushroomkingdom.net/sounds/wav/smw/smw_coin.wav" /></audio>';
}

<button onclick="setTimeout(playCoinDrop, 3000)">play sound</button>

您可以根据需要替换音频文件。

---

示例 2 - 本地存储

这是一种更高级的方法，它利用了localStorage，这可能是您的最佳选择。这允许您通过将通知声音作为 Base64 下载到 localStorage 来预加载通知声音，然后您可以在选项卡在后台时调用播放它，而不会导致额外的网络传输。

这种方法的一个主要好处是只下载一次通知文件，然后从浏览器 localStorage 本地播放。

downloadCoin() 函数将文件作为 base64 存储在 localStoarge 中
playCoinDrop() 动态创建 div 并播放 base64 数据
playCoinDropJS() 播放 base64 数据而不创建任何 div

function downloadCoin() {
  var coin = 'smw_coin.wav';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', coin, true);
  xhr.responseType = 'blob';
  xhr.onload = function(e) {
    if (this.status == 200) {
      var blob = new Blob([this.response], {
        type: 'audio/wav'
      });
      var reader = new window.FileReader();
      reader.readAsDataURL(blob);
      reader.onloadend = function() {
        var coinB64 = reader.result;
        var myStorage = localStorage.setItem('coin_base64', coinB64)
      }
    }
  };
  xhr.send();
}

function playCoinDrop() {
  var coinB64 = localStorage.getItem('coin_base64');
  var soundDiv = document.createElement('div');
  soundDiv.innerHTML = '<audio autoplay="autoplay"><source src="' + coinB64 + '" type="audio/wav" />';
}

function playCoinDropJS(){
    var coinB64 = localStorage.getItem("coin_base64");
    var snd = new Audio(coinB64); 
    snd.play();
}

<button onclick="downloadCoin()">download</button>
<button onclick="setTimeout(playCoinDrop, 3000)">play sound</button>
<button onclick="setTimeout(playCoinDropJS, 3000)">play sound JS</button>

demo on github

Answer 3

在这里，后台标签仍然可以播放来自<audio> 元素的声音（Chrome 49.0.2623.87）。但是，如果 Chrome 阻止了这一点，解决它的一种方法是通知前面的选项卡有一个事件，并让它播放声音而不是背景选项卡。

以下内容需要作为用户脚本扩展来实现，以便它可以在任何选项卡上工作 - 作为演示，它只在具有相同 JSBin URL 的两个选项卡之间工作：

var intercom = Intercom.getInstance();

document.addEventListener("visibilitychange", getVisible);

function getVisible (evt) {
  document.getElementById("fg-indicate").style.visibility = document.visibilityState;
  if (document.visibilityState == "visible") {    
     // tab comes to front => listen to intercom
     intercom.on('notice', play);
   } else {
     // kill callback
     intercom.off('notice', play);
     // call intercom with delay
     window.setTimeout(function f() {
       intercom.emit('notice', {message: 'Hello, all windows!'});
     }, 3000);
   }
}

function play() {
  document.getElementsByTagName("audio")[0].play();
}

它依赖于intercom.js 库并使用本地存储在打开的选项卡之间进行通信。

试试这个

• 在一个标签中打开https://jsbin.com/gerihijofe/1/edit?html,js,output
• 然后在另一个标签中
• 切换标签
• 等待 3 秒，看看小喇叭图标出现在哪里
• 切换标签
• 等待 3 秒，看看小喇叭图标出现在哪里

等等。

注入<audio> 元素的代码和更多代码可以包装在用户脚本中，这样它就可以在碰巧在前面的任何站点上运行。