当出现 "Content Security Policy" 错误时，如何在 FireFox 中使用 GreaseMonkey 脚本播放声音？

Question

var audioPlayer = new Audio("http://URLTOMYSOUND/ping.mp3");
audioPlayer.play();

加载音频时出现此错误：

Content Security Policy: The page's settings blocked the loading of a resource at...

我该如何解决这个问题？我不在乎声音在哪里，我只想播放它。它可能是本地的，但我的印象是本地文件访问也是禁忌。

Answer 1

如果您运行从 Greasemonkey 2.3 开始遇到内容安全策略 (CSP) 问题，则无法（目前）播放文件中的声音。如果您可以修改您想要运行的站点的 HTTP headers，这是可能的。 参见Using Content Security Policy and CSP policy directives。

使用GM_xmlhttpRequest which "allows these requests to cross the same origin policy boundaries", does not work because of a bug in the current GM 2.3. See issue #2045。问题源于无法将 ArrayBuffer 复制到沙箱区以获取适当的解码权限等。

下面的代码片段应该适用于未来的 GM 版本。

// ==UserScript==
// @name        Testing Web Audio: Load from file
// @namespace   http://ericeastwood.com/
// @include     http://example.com/
// @version     1
// @grant       GM_xmlhttpRequest
// ==/UserScript==
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
// Note: this is not an actual reference to a real mp3
var url = 'http://example.com/some.mp3';

var soundLoadedPromise = new Promise(function(resolve, reject) {
    // This will get around the CORS issue
    //      http://wiki.greasespot.net/GM_xmlhttpRequest
    var req = GM_xmlhttpRequest({
        method: "GET",
        url: url,
        responseType: 'arraybuffer',
        onload: function(response) {
            try {
                context.decodeAudioData(response.response, function(buffer) { 
                    resolve(buffer)
                }, function(e) {
                    reject(e);
                }); 
            }
            catch(e) {
                reject(e);
            }
        }
    });
});

soundLoadedPromise.then(function(buffer) {
    playSound(buffer);
}, function(e) {
    console.log(e);
});

function playSound(buffer) {
    // creates a sound source
    var source = context.createBufferSource();
    // tell the source which sound to play
    source.buffer = buffer;
    // connect the source to the context's destination (the speakers)
    source.connect(context.destination);
    // play the source now
    // note: on older systems, may have to use deprecated noteOn(time);
    source.start(0);
}

现在，如果您只需要一些声音，我会用振荡器按程序生成它。下面的演示使用 AudioContext.createOscillator.

演示：jsFiddle

// ==UserScript==
// @name        Test Web Audio: Oscillator - Web Audio
// @namespace   http://ericeastwood.com/
// @include     http://example.com/
// @version     1
// @grant       none
// ==/UserScript==
window.AudioContext = window.AudioContext || window.webkitAudioContext;

context = new AudioContext();

var o = context.createOscillator();
o.type = 'sine';
o.frequency.value = 261.63;
o.connect(context.destination);

// Start the sound
o.start(0);
// Play the sound for a second before stopping it
setTimeout(function() {
    o.stop(0);
}, 1000);

当出现 "Content Security Policy" 错误时，如何在 FireFox 中使用 GreaseMonkey 脚本播放声音？

How can I play sound with a GreaseMonkey script in FireFox when there's a "Content Security Policy" error?

firefox

greasemonkey

content-security-policy

演示：jsFiddle