当进程处于后台时，如何在Android Chrome中禁用音频播放？

Question

如何以编程方式禁止在Chrome Android进程的后台播放歌曲？

这是一个简单的页面示例，它在Chrome中播放歌曲：

https://thomashunter.name/examples/chrome-audio-bug.html

var song = new Audio('song.ogg');
song.loop = 'loop';

button = document.getElementById('play');

button.addEventListener("click", function() {
  song.play();
});

注意这首歌是如何在背景中继续播放的。虽然对于点唱机来说很好，但它会让网络游戏的玩家发疯。

有没有办法禁用Chrome中单个音频元素的后台播放？或者，当页面失去焦点时，是否至少有一个回调，以便我可以运行歌曲。停止（）？

Answer 1

使用HTML5可视性API

    <script>
    var song = new Audio('http://zyu.me:1337/audio/Evasion.ogg');
    song.loop = 'loop';

    button = document.getElementById('play');

    button.addEventListener("click", function() {
      song.play();
    });
var vis = (function(){
    var stateKey, 
        eventKey, 
        keys = {
                hidden: "visibilitychange",
                webkitHidden: "webkitvisibilitychange",
                mozHidden: "mozvisibilitychange",
                msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();
  
  vis(function(){
					
    if(vis()){
        console.log("tab is visible");
		song.play();									
    } else {
	
        console.log("tab is invisible");	
		song.pause();
    }
});
  
  
  </script>

Answer 2

您可以尝试使用visibilitychange：

document.addEventListener('visibilitychange', function(){
    if (document.hidden) {
        // Document is hidden 

        // This re-initialize the audio element
        // to release the audio focus
        song.load(); 
    }
    else {
        // Document is focused
    }
},false);

完整的示例可在此处获得https://jsfiddle.net/6001wsf9/

在Android 5.0和Chrome 43.0.2357.78上测试