In Javascript, wenn Sie lokal arbeiten, wie man Datei vom Projektordner liest, um es als ArrayBuffer zu verwenden?

Question

Ich arbeite an einem Synthesizer mit der Web Audio API. Im Moment habe ich Probleme, die Impulsantwort für einen Hall in eine arrayBuffer zu laden, damit ich sie mit dem Audio-Kontext verwenden kann.

Da ich lokal arbeite, habe ich versucht, einfach die Datei mit dem IR (im selben Ordner wie die index.html, unter audio/IR/irHall.ogg) aus dem Dateisystem zu lesen, wie ich es in Ruby-Projekten mache. Jetzt denke ich zu verstehen, dass dies aufgrund von Sicherheitsproblemen beim Ausführen von Javascript-Code im Browser nicht möglich ist.

Also habe ich versucht, diesen Ansatz, den ich in einem meiner App tutorial

 


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(); 
} 

 

gefunden, wenn ich diese Funktion mit url = 'audio/IR/irHall.ogg' nennen gibt es mir dieser Fehler ':

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.` 

Ich bin Entschuldigung Wenn es rüberkommt, als hätte ich nicht viel recherchiert. Tatsächlich suche ich stundenlang nach einer Lösung und werde immer verwirrter.

Kann mir jemand eine Idee geben, wie man am besten/am besten eine Datei aus dem Projekt lädt, um den Inhalt in einem Javascript-Kontext zu verwenden?

Dank!

Answer 1

Ich fand, dass die Einrichtung eines einfachen statischen http-Servers mit Knoten war nicht so viel Mühe überhaupt und funktioniert perfekt für mich. Ich folgte diesem tutorial über bei Sitepoint von Ian Oxley und ging für das Paperboy-Beispiel.

Erstellen Sie einfach eine Knotendatei, z. paperboy-server.js und füllen Sie es mit diesem Code:

 


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); 

 

I, in denen nur webroot geändert statisch auf das Verzeichnis zeigen I für Bequemlichkeit arbeite.

beginne ich dann nur den Knoten Skript in einem Terminal mit: node paperboy-server.js

im Browser statt mit file:///.. aus dem Dateisystem dient ich jetzt in wie gezeigt verwenden kann localhost:8080 meine App und Laden von Dateien zugreifen das OP funktioniert gut.