Javascript 在react with play/pause功能中使用WebAudio api进行音频录制

我在react with webaudio api中有一个用于录制语音的应用程序。它具有播放/暂停功能。 有时音频播放时没有声音，有时某些部分缺失，但音频长度正确。有时音频是正确的。下面是我的代码。有人能指出代码中的错误吗

import React from 'react';
import { Button} from 'react-bootstrap';
import { saveAs } from 'file-saver';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';


var audioBufferUtils = require("audio-buffer-utils")
var encodeWAV = require('audiobuffer-to-wav')

let audio = new Audio();
var context = new AudioContext()
var audioBuffer = []
function App() {

  var status  = true

  function listen() {
    initDevice()
  }

  function pauseRecording(){
    if (status){
      context.suspend()
      status = false
    }
    else{
      context.resume()
      status = true
    }
    
  }

  function initDevice(){
  const handleSuccess = function(stream) {
    const source = context.createMediaStreamSource(stream);
    const processor = context.createScriptProcessor(1024, 1, 1);
    
    source.connect(processor);
    processor.connect(context.destination);
    processor.onaudioprocess = function(e) {
      audioBuffer =  audioBufferUtils.concat(audioBuffer,e.inputBuffer)
    };
  };

  navigator.mediaDevices.getUserMedia({ audio: true, video: false })
      .then(handleSuccess);
  };
  function saveAudio(){
    context.suspend()
    var wav = encodeWAV(audioBuffer)
    var blob = new Blob([ new DataView(wav) ], {
      type: 'audio/wav'
    })

    let finalAudio = new Audio()
    var url = window.URL.createObjectURL(blob)        
    finalAudio.src = url
    finalAudio.play()
    saveAs(blob,"test.wav")

  }

  return (
        <div >
          <Button variant="warning" id="listen" onClick={listen}>Listen</Button>
          <Button variant="warning" id="stop" onClick={pauseRecording}>play/pause</Button>

          <Button variant="warning" id="stop" onClick={saveAudio}>Save</Button>
        </div>
  );
}

export default App;

从“React”导入React；
从“react bootstrap”导入{Button}；
从“文件保护程序”导入{saveAs}；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/App.css”；
var audioBufferUtils=require（“音频缓冲区utils”）
var encodeWAV=require（'audiobuffer-to-wav'）
让音频=新音频（）；
var context=newaudiocontext（）
var audioBuffer=[]
函数App（）{
var状态=真
函数listen（）{
initDevice（）
}
函数暂停录制（）{
如果（状态）{
context.suspend（）
状态=错误
}
否则{
context.resume（）
状态=真
}
}
函数initDevice（）{
const handleSuccess=函数（流）{
const source=context.createMediaStreamSource（流）；
const processor=context.createScriptProcessor（1024,1,1）；
source.connect（处理器）；
processor.connect（context.destination）；
processor.onaudioprocess=函数（e）{
audioBuffer=audioBufferUtils.concat（audioBuffer，例如inputBuffer）
};
};
navigator.mediaDevices.getUserMedia（{audio:true，video:false}）
.然后（顺利）；
};
函数saveAudio（）{
context.suspend（）
var wav=编码wav（音频缓冲区）
var blob=新blob（[新数据视图（wav）]{
键入：“音频/wav”
})
让finalAudio=新音频（）
var url=window.url.createObjectURL（blob）
finalAudio.src=url
finalAudio.play（）
saveAs（blob，“test.wav”）
}
返回(
听
播放/暂停
拯救
);
}
导出默认应用程序；

---

我想使用webaudio api，因为我必须在录制完成后处理音频。代码似乎很好。我怀疑这里的问题是

脚本处理器

阻塞。因为在下一次调用

onaudioprocess

时，它无法及时完成执行

onaudioprocess

。这通常会导致这种随机行为

一个简单的尝试就是使用ScriptProcessor的

bufferSize

参数。增加这一点有时可能会有所帮助

另一种可能的解决方案是将音频缓冲区的连接移动到WebWorker，这样主线程就可以执行下一个

onaudioprocess

。我相信像recorder.js这样的库可以做到这一点

---

<>最后，你也可以考虑使用类似的东西或者它的更新叉来做这个< /p> 代码看起来很好。我怀疑这里的问题是

脚本处理器

阻塞。因为在下一次调用

onaudioprocess

时，它无法及时完成执行

onaudioprocess

。这通常会导致这种随机行为

一个简单的尝试就是使用ScriptProcessor的

bufferSize

参数。增加这一点有时可能会有所帮助

另一种可能的解决方案是将音频缓冲区的连接移动到WebWorker，这样主线程就可以执行下一个

onaudioprocess

。我相信像recorder.js这样的库可以做到这一点

<>最后，您也可以考虑使用类似的或它的更新叉中的一个来做这个