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

In Javascript, when working locally, how to read file from project folder to use it as ArrayBuffer?

本文关键字：文件 读取 文件夹 ArrayBuffer 项目文件 Javascript 工作 项目      更新时间：2023-09-26

我正在使用Web音频API开发合成器。现在，我正在努力将混响的脉冲响应加载到arrayBuffer中，以便在音频上下文中使用它。

当我在本地工作时，我试着像在Ruby项目中一样，简单地从文件系统中读取带有IR的文件（位于与index.html相同的文件夹中，位于audio/IR/irHall.ogg下）。现在我想明白了，这是不可能的，因为在浏览器中运行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上下文中使用其内容的最佳/常用方法是什么吗？

谢谢！

我发现用node设置一个简单的静态http服务器一点也不麻烦，而且非常适合我。我在Sitepoint上学习了Ian Oxley的教程，并以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

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

相关文章：