在Javascript中，当在本地工作时，如何从项目文件夹中读取文件以将其用作ArrayBuffer？

Question

我正在使用Web音频API处理合成器。 现在我正在努力将混响的脉冲响应加载到arrayBuffer ，以便我可以将它与音频上下文一起使用。

当我在本地工作时，我试图简单地从文件系统中读取IR（与index.html位于index.html相同的文件夹下，在audio/IR/irHall.ogg ），就像我在Ruby项目中那样。 现在我想要明白，由于在浏览器中运行Javascript代码时出现安全问题，这是不可能的。

所以我尝试了在教程中找到的这种方法

function loadAudio( object, url) {

    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';

    request.onload = function() {
        context.decodeAudioData(request.response, function(buffer) {
            object.buffer = buffer;
        });
    }
    request.send();
}

在我的应用程序中，当我用url = 'audio/IR/irHall.ogg'调用此函数时，它会给我这个错误'：

dub-machine.js:63 XMLHttpRequest cannot load file:///Users/bla/projects/dub-machine/audio/IR/irHall.ogg. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.`

我很抱歉如果遇到好像我没有研究很多。 事实上，我正在谷歌搜索解决方案几个小时，并继续变得更加困惑。

有人可以告诉我从项目中加载文件以在javascript上下文中使用其内容的最佳/常用方法是什么？

谢谢！

Answer 1

我发现用节点设置一个简单的静态http服务器并没有那么麻烦，对我来说非常合适。 我在Ian Oxley的Sitepoint上学习了本教程 ，并参加了Paperboy示例。

只需创建一个节点文件，例如paperboy-server.js ，并用以下代码填充它：

var paperboy = require('paperboy'),
    http = require('http'),
    path = require('path')

var webroot = "/localpath/to/your/project",
    port = 8080

http.createServer(function(req, res){
    var ip = req.connection.remoteAddress
    paperboy
    .deliver(webroot, req, res)
    .addHeader('X-Powered-By', 'Atari')
    .before(function() {
      console.log('Request received for ' + req.url);
    })
    .after(function(statusCode) {
      console.log(statusCode + ' - ' + req.url + ' ' + ip);
    })
    .error(function(statusCode, msg) {
      console.log([statusCode, msg, req.url, ip].join(' '));
      res.writeHead(statusCode, { 'Content-Type': 'text/plain' });
      res.end('Error [' + statusCode + ']');
    })
    .otherwise(function(err) {
      console.log([404, err, req.url, ip].join(' '));
      res.writeHead(404, { 'Content-Type': 'text/plain' });
      res.end('Error 404: File not found');
    });
}).listen(port);

console.log('paperboy on his round at http://localhost:' + port);

我刚刚将webroot改为静态指向我工作的目录，以方便使用。

然后我只需在终端中启动节点脚本： node paperboy-server.js

在浏览器中，而不是使用file:///..来从文件系统提供服务file:///..我现在可以使用localhost:8080访问我的应用程序并加载文件，如OP中所示可以正常工作。