web-dev-qa-db-ja.com

decodeAudioDataHTML5オーディオAPI

ArrayBufferからオーディオデータを再生したいので、配列を生成してマイクロフォン入力で埋めます。このデータをキャンバスに描画すると、次のようになります-> enter image description here

だからこれはうまくいく！

しかし、私がこのデータを聞きたい場合は

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

ErrorFunctionが呼び出されたため、何も聞こえません。しかし、エラーはnullです！

私はまた、そのようなバッファを取得しようとしました：

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

しかし、エラーが発生します：Uncaught SyntaxError：無効または不正な文字列が指定されました。

ヒントを教えてくれる人はいますか？

編集1（より多くのコードとマイク入力の取得方法）：

 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.

ご協力いただきありがとうございます！

javascripthtmlbufferdecodehtml5-audio
23
Cracker0dks

現在の webaudio api spec では、その関数はオブジェクトエラーを返さないため、コールバック関数から返されるエラーはnullです。

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

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

DecodeSuccessCallbackは、完全な入力ArrayBufferがデコードされ、AudioBufferとして内部に保存されたときに発生しますが、何らかの理由で、decodeAudioDataはライブストリームをデコードできません。

オーディオを処理するときに、キャプチャされたバッファを再生して、出力バッファデータを設定することができます

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);
  });
}
6
vzamanillo

しばらくして、私はこの問題をもう一度解決しようとし、解決策を見つけました：

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

それはまったく複雑ではないので、私は実用的なフィドルを作成しました：

https://jsfiddle.net/WEM3y/

マイクをアクティブにして（chrome v35でテスト済み）、チェックしてください。

私が変更した部分：

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
    }
}
1
Cracker0dks

コンテキストの初期化は、OJayが推奨するように このコードがSafariで機能するのに、Chromeでは機能しないのはなぜですか？Arrrgh

0
Thierry Marianne