在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中所示可以正常工作。