javascript - the - web audio api tutorial

decodeAudioData HTML5 Audio API

Question

Quiero reproducir datos de audio de un ArrayBuffer ... así que genero mi matriz y la lleno con la entrada de microfone. Si dibujo estos datos en un lienzo, parece que ->

Así que esto funciona!

Pero si quiero escuchar estos datos con

context.decodeAudioData(tmp, function(bufferN) { //tmp is a arrayBuffer
    var out = context.createBufferSource();
    out.buffer = bufferN;
    out.connect(context.destination);
    out.noteOn(0);
}, errorFunction);

No escucho nada ... porque se llama el errorFunction. ¡Pero el error es nulo!

También traté de obtener el búfer de esa manera:

var soundBuffer = context.createBuffer(myArrayBuffer, true/*make mono*/);

Pero me sale el error: SyntaxError no capturado: se especificó una cadena no válida o ilegal.

¿Alguien que pueda darme una pista?

EDIT 1 (Más código y cómo obtengo la entrada de micrófono):

 navigator.webkitGetUserMedia({audio: true}, function(stream) {

                liveSource = context.createMediaStreamSource(stream);

                // create a ScriptProcessorNode
                if(!context.createScriptProcessor){
                   node = context.createJavaScriptNode(2048, 1, 1);
                } else {
                   node = context.createScriptProcessor(2048, 1, 1);
                }


                node.onaudioprocess = function(e){

               var tmp = new Uint8Array(e.inputBuffer.byteLength);
               tmp.set(new      Uint8Array(e.inputBuffer.byteLength), 0);

   //Here comes the code from above.

¡Gracias por tu ayuda!

Answer 1

Después de un tiempo traté de resolver este problema de nuevo y encontré una solución:

https://developer.mozilla.org/en-US/docs/Web/API/ScriptProcessorNode

No es nada complicado, así que creé un violín de trabajo:

https://jsfiddle.net/WEM3y/

Así que activa tu micrófono (probado en Chrome v35) y échale un vistazo.

La parte que he cambiado:

node.onaudioprocess = function(e){

    var outData = e.outputBuffer.getChannelData(0);
    var inData = e.inputBuffer.getChannelData(0);

    // Loop through the 4096 samples, copy them to output buffer
    for (var sample = 0; sample < e.outputBuffer.length; sample++) {
      // Set the data in the output buffer for each sample
      outData[sample] = inData[sample]; //Modify your buffer here if you want
    }
}

Answer 2

El error devuelto por la función de devolución de llamada es nulo porque en la especificación de la interfaz de usuario de webaudio actual esa función no devuelve un error de objeto

callback DecodeSuccessCallback = void (AudioBuffer decodedData);
callback DecodeErrorCallback = void ();

    void decodeAudioData(ArrayBuffer audioData,
                         DecodeSuccessCallback successCallback,
                         optional DecodeErrorCallback errorCallback);

DecodeSuccessCallback se genera cuando la entrada completa ArrayBuffer se decodifica y almacena internamente como un AudioBuffer, pero por alguna razón desconocida, decodeAudioData no puede decodificar una transmisión en vivo.

Puede intentar reproducir el búfer capturado configurando los datos del búfer de salida al procesar audio

function connectAudioInToSpeakers(){

  //var context = new webkitAudioContext();  
  navigator.webkitGetUserMedia({audio: true}, function(stream) {

    var context = new webkitAudioContext();  
    liveSource = context.createMediaStreamSource(stream);

    // create a ScriptProcessorNode
    if(!context.createScriptProcessor){
       node = context.createJavaScriptNode(2048, 1, 1);
    } else {
       node = context.createScriptProcessor(2048, 1, 1);
    }


    node.onaudioprocess = function(e){

        try{
            ctx.clearRect(0, 0, document.getElementById("myCanvas").width, document.getElementById("myCanvas").height);
            document.getElementById("myCanvas").width = document.getElementById("myCanvas").width;
            ctx.fillStyle="#FF0000";

            var input = e.inputBuffer.getChannelData(0);
            var output = e.outputBuffer.getChannelData(0);
            for(var i in input) {
                output[i] = input[i];
                ctx.fillRect(i/4,input[i]*500+200,1,1);
            }


        }catch (e){
            console.log(''node.onaudioprocess'',e.message);
        }

    }

     // connect the ScriptProcessorNode with the input audio
    liveSource.connect(node);
    // if the ScriptProcessorNode is not connected to an output the "onaudioprocess" event is not triggered in chrome
    node.connect(context.destination);

    //Geb mic eingang auf boxen
    //liveSource.connect(context.destination);
  });
}

Answer 3

La inicialización de contexto se puede hacer según lo recomendado por OJay en ¿Por qué este código funciona en Safari pero no en Chrome? Arrrgh