23

我想从 ArrayBuffer 播放音频数据...所以我生成我的数组并用 microfone 输入填充它。如果我在画布上绘制这些数据，它看起来像 --> 在此处输入图像描述

所以这行得通！

但是如果我想听这些数据

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。但是错误是空的！

我也尝试像这样获得缓冲区：

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

但我收到错误：未捕获的语法错误：指定了无效或非法的字符串。

谁能给我一个提示？

编辑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.

谢谢你的帮助！

4

3 回答 3

6

回调函数返回的错误为 null，因为在当前webaudio api 规范中，该函数不返回对象错误

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

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

当完整的输入 ArrayBuffer 被解码并在内部存储为 AudioBuffer 但由于某些未知原因 decodeAudioData 无法解码实时流时，会引发 DecodeSuccessCallback。

您可以在处理音频时尝试播放捕获的缓冲区设置输出缓冲区数据

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);
  });
}
于 2013-12-20T12:20:00.303 回答
1

过了一会儿，我再次尝试解决这个问题并找到了解决方案：

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
    }
}
于 2014-05-28T21:00:50.560 回答
0

您的上下文初始化可能会按照 OJay 在Why does this code work in Safari but not Chrome 中的建议完成？啊啊啊

于 2013-12-19T13:16:43.470 回答