Gibt es einen Weg, um die Web-Audio-API zum Beispiel audio schneller als in Echtzeit?

Ich bin Herumspielen mit der Web Audio API & versucht, einen Weg finden, importieren Sie eine mp3 (also das ist nur bei Chrome), und generieren Sie eine Wellenform auf einer Leinwand. Kann ich dies in Echtzeit, aber mein Ziel ist, diese schneller als in Echtzeit.

Allen Beispielen, die ich habe finden können, beinhalten Lesen Sie den Frequenz-Daten aus einer Analysator-Objekt in eine Funktion angebracht die onaudioprocess Veranstaltung:

processor = context.createJavascriptNode(2048,1,1);
processor.onaudioprocess = processAudio;
...
function processAudio{
    var freqByteData = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(freqByteData);
    //calculate magnitude & render to canvas
}

Scheint es aber, dass analyser.frequencyBinCount wird nur aufgefüllt, wenn der sound abgespielt wird (etwas über der Puffer gefüllt wird).

Was ich will, ist in der Lage sein manuell/programmatisch Schritt für Schritt durch die Datei so schnell wie möglich zu generieren Leinwand Bild.

Was ich habe, so weit ist diese:

$("#files").on('change',function(e){
    var FileList = e.target.files,
        Reader = new FileReader();

    var File = FileList[0];

    Reader.onload = (function(theFile){
        return function(e){
            context.decodeAudioData(e.target.result,function(buffer){
                source.buffer = buffer;
                source.connect(analyser);
                analyser.connect(jsNode);

                var freqData = new Uint8Array(buffer.getChannelData(0));

                console.dir(analyser);
                console.dir(jsNode);

                jsNode.connect(context.destination);
                //source.noteOn(0);
            });
        };
    })(File);

    Reader.readAsArrayBuffer(File);
});

Aber getChannelData() gibt immer eine leere typisiertes array.

Jede Einsicht wird geschätzt - auch wenn es stellt sich heraus, es kann nicht getan werden. Ich glaube, ich bin der einzige, der das Internet nicht wollen, um Dinge zu tun, in Echtzeit.

Dank.

  • schneller als Echtzeit?
  • ya - schneller als in Echtzeit. Wie in, wenn die Dauer der Strecke beträgt 5 Minuten, ich will nicht 5 Minuten zu warten, bis das Signal erzeugt. Ich möchte, um es zu verarbeiten, so schnell wie möglich (hoffentlich wenigen Sekunden)
  • füllen Sie die Uint8Array falsch. Finden Sie eine funktionierende Lösung hier.
InformationsquelleAutor Quasipickle | 2011-11-10
  1. 25

    Es ist eine wirklich erstaunliche 'offline' - Modus der Web-Audio-API, mit der Sie vor der Verarbeitung eine ganze Datei durch eine audio-Kontext tun, und dann etwas mit dem Ergebnis:

    var context = new webkitOfflineAudioContext();

var source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.noteOn(0);

context.oncomplete = function(e) {
  var audioBuffer = e.renderedBuffer;
};

context.startRendering();

    Also das setup sieht genau die gleiche wie die Verarbeitung in Echtzeit-Modus, außer Sie richten die oncomplete Rückruf und der Aufruf startRendering(). Das, was Sie wieder in e.redneredBuffer ist ein AudioBuffer.

    • Es ist schon sehr spät jetzt, und ich arbeite an anderen Sachen, aber diese Antwort klingt wirklich vielversprechend (Grunde, weil es die einzige, die ich bekommen habe). Ich werde sicher sein, Sie wissen zu lassen, wie das geht.
    • OK, ich habe das Spiel mit dieser für den besseren Teil von einer Stunde, und ich bin verloren. Wie würde dein code passen zu mir? Wenn Sie set source.buffer = buffer wo kommt buffer kommen? Der einzige Ort, ich kann sehen, ein AudioBuffer erstellt wird, ist als argument für den Erfolg Funktion im Kontext.decodeAudioData(). Hier ein jsfiddle, was ich habe. Es ist ein komplettes Chaos, aber seine wo ich bin - ziemlich stechend in der Dunkelheit. jsfiddle.net/NW7E3 Stellen Sie sicher, dass Sie die Konsole active
    • Recht. buffer ist ein AudioBuffer, dass Sie aus der decodeAudioData
    • Fügen Sie eine lokale AudioContext in Ihrem oncomplete callback: var context = new webkitAudioContext();. Im wesentlichen, ich denke, Sie müssen einen Kontext schaffen, zum spielen und einen Rahmen für die Verarbeitung.
    • Ich denke, dein Beispiel ist etwas fehlt. Wenn der Echtzeit-Verarbeitung von Daten nur dann zugeführt, um den Prozessor, wenn die source.noteOn(0) aufgerufen wird. Was ist es, das löst die Verarbeitung, wenn startRendering() verwendet wird? Hast du irgendwelche Unterlagen dazu? Ich konnte nichts finden, außer die patch-notes. JSFiddle von real-time-Verarbeitung: jsfiddle.net/QpzQm/10 JSFiddle von meine beste Schätzung, wie startRendering() verwendet wird (was aber eigentlich nichts macht), jsfiddle.net/9TEKG
    • hatten Sie schon einmal irgendwo mit diesem?
    • Nein - der standard ist noch immer zu flüssig & die Dokumentation zu spärlich. Es ist noch in der Entwicklung aber.
    • Könnte dies, indem Sie jede chance, die Arbeit mit einem mediaElementSourceNode? stackoverflow.com/questions/11292076/...
    • Ich arbeite auch dieses problem (stackoverflow.com/q/13590999/1015178). Hier das Beispiel code.google.com/p/chromium/source/browse/trunk/samples/audio/... verwendet eine webkitAudioContext Konstruktor mit ein paar zusätzliche Argumente, aber das funktioniert nur auf dem Mac. Fehler treten in Windows und Linux.
    • Ich habe etwas ähnliches in meinem WebAudio-app: github.com/letier/boombox

    InformationsquelleAutor ebidel
  2. 5

    Habe ich diese arbeiten mit OfflineAudioContext mit dem folgenden code. Das komplette Beispiel hier zeigt, wie es zu verwenden, um die Berechnung der FFT-Magnituden für einen linearen chirp. Sobald Sie haben das Konzept der Haken die Knoten zusammen, können Sie fast alles offline.

    function fsin(freq, phase, t) {
  return Math.sin(2 * Math.PI * freq * t + phase)
}

function linearChirp(startFreq, endFreq, duration, sampleRate) {
  if (duration === undefined) {
    duration = 1; //seconds
  }
  if (sampleRate === undefined) {
    sampleRate = 44100; //per second
  }
  var numSamples = Math.floor(duration * sampleRate);
  var chirp = new Array(numSamples);
  var df = (endFreq - startFreq) / numSamples;
  for (var i = 0; i < numSamples; i++) {
    chirp[i] = fsin(startFreq + df * i, 0, i / sampleRate);
  }
  return chirp;
}

function AnalyzeWithFFT() {
  var numChannels = 1; //mono
  var duration = 1; //seconds
  var sampleRate = 44100; //Any value in [22050, 96000] is allowed
  var chirp = linearChirp(10000, 20000, duration, sampleRate);
  var numSamples = chirp.length;

  //Now we create the offline context to render this with.
  var ctx = new OfflineAudioContext(numChannels, numSamples, sampleRate);

  //Our example wires up an analyzer node in between source and destination.
  //You may or may not want to do that, but if you can follow how things are
  //connected, it will at least give you an idea of what is possible.
  //
  //This is what computes the spectrum (FFT) information for us.
  var analyser = ctx.createAnalyser();

  //There are abundant examples of how to get audio from a URL or the
  //microphone. This one shows you how to create it programmatically (we'll
  //use the chirp array above).
  var source = ctx.createBufferSource();
  var chirpBuffer = ctx.createBuffer(numChannels, numSamples, sampleRate);
  var data = chirpBuffer.getChannelData(0); //first and only channel
  for (var i = 0; i < numSamples; i++) {
    data[i] = 128 + Math.floor(chirp[i] * 127); //quantize to [0,256)
  }
  source.buffer = chirpBuffer;

  //Now we wire things up: source (data) -> analyser -> offline destination.
  source.connect(analyser);
  analyser.connect(ctx.destination);

  //When the audio buffer has been processed, this will be called.
  ctx.oncomplete = function(event) {
    console.log("audio processed");
    //To get the spectrum data (e.g., if you want to plot it), you use this.
    var frequencyBins = new Uint8Array(analyser.frequencyBinCount);
    console.log(analyser.getByteFrequencyData(frequencyBins);
    //You can also get the result of any filtering or any other stage here:
    console.log(event.renderedBuffer);
  };

  //Everything is now wired up - start the source so that it produces a
  //signal, and tell the context to start rendering.
  //
  //oncomplete above will be called when it is done.
  source.start();
  ctx.startRendering();
}
    InformationsquelleAutor shiblon
Schreibe einen Kommentar