如何从 cordova-plugin-audioinput 获取音频流以进行实时可视化

Posted 2023-03-27

【中文标题】如何从 cordova-plugin-audioinput 获取音频流以进行实时可视化

【英文标题】：How to get audio stream from cordova-plugin-audioinput for realtime visualizer

【发布时间】：2019-12-26 01:03:03

【问题描述】：

我正在使用cordova-plugin-audioinput 在我的基于cordova 的应用程序中录制音频。 文档可以在这里找到：https://www.npmjs.com/package/cordova-plugin-audioinput

我之前使用浏览器的 MediaRecorder 功能录制音频，但由于音频质量问题，我切换到了插件。 我的问题是我在录制期间有一个音量的实时可视化器，我的功能曾经使用来自媒体记录器的输入流来工作

function wave(stream) 
    audioContext = new AudioContext();
    analyser = audioContext.createAnalyser();
    microphone = audioContext.createMediaStreamSource(stream);
    javascriptNode = audioContext.createScriptProcessor(2048, 1, 1);

    analyser.smoothingTimeConstant = 0.8;
    analyser.fftSize = 1024;

    microphone.connect(analyser);
    analyser.connect(javascriptNode);
    javascriptNode.connect(audioContext.destination);
    javascriptNode.onaudioprocess = function () 
        var array = new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var values = 0;
        var length = array.length;
        for (var i = 0; i < length; i++) 
            values += (array[i]);
        

        var average = values / length;
        // use average for visualization

    

现在我使用了cordova-plugin-audioinput，即使文档中提到了“streamToWebAudio”参数，我也找不到从麦克风中检索流的方法，我找不到让它工作的方法.

对此有何见解？ 提前谢谢你！

【参考方案1】：

我相信你必须改为连接分析仪，例如

 function wave(stream)     
      var audioContext = new AudioContext();
      var analyser = audioContext.createAnalyser();
      analyser.connect(audioContext.destination);
      audioinput.start(streamToWebAudio: true);
      var dest = audioinput.getAudioContext().createMediaStreamDestination();
      audioinput.connect(dest);
      var stream = dest.stream;
      var input = audioContext.createMediaStreamSource(stream);
      input.connect(analyser);
      analyser.onaudioprocess = function()
            ...
      
 

【讨论】：

您好埃里克感谢您的回答！我通过访问 live evt.data 解决了这个问题，audioinput 提供了名为“audioinput”的事件，这样我获得了一个值数组，我可以调整这些值以获得或多或少与使用之前的函数相同的结果，但是再次感谢您的回答！

【参考方案2】：

作为几年后偶然发现这一点并想知道为什么在另一个答案中添加了额外目的地的人，我现在意识到这是因为 Eric 需要将输入流与分析器放入相同的 AudioContext 中。

现在，忽略分析器的规范自答案以来发生了变化的事实，只专注于将输入流变成有用的东西。您可以像这样将音频上下文传递到音频输入配置中并节省一些步骤

 function wave(stream)     
  var audioContext = new AudioContext();
  var analyser = audioContext.createAnalyser();
  analyser.connect(audioContext.destination);
  audioinput.start(
    streamToWebAudio: true
    audioContext: audioContext
  );
  audioinput.connect(analyser);
  analyser.onaudioprocess = function()
        ...