使用WebAudio api进行录音，并具有播放/暂停功能

问题描述

我有一个与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;

我想使用webaudio api，因为录制完成后我必须处理音频

解决方法

代码似乎很好。我怀疑这里的问题是ScriptProcessor令人窒息。因为它无法及时完成onaudioprocess的下一次调用。通常会导致这种随机行为。

一个简单的尝试是使用ScriptProcessor的onaudioprocess参数。有时这可能会有所帮助。

另一种可能的解决方案是将AudioBuffer的串联移动到WebWorker，这样主线程就可以执行下一个bufferSize了。我相信诸如recorder.js之类的库可以做到这一点。

最后，您还可以考虑使用https://github.com/mattdiamond/Recorderjs之类的东西或其中之一来进行更新