使用 WebAudio api 与播放/暂停功能反应的音频记录答案

【问题标题】：Audio record using WebAudio api in react with play/pause feature使用 WebAudio api 与播放/暂停功能反应的音频记录
【发布时间】：2020-08-28 14:53:25
【问题描述】：

我有一个与 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，因为我必须在录制完成后处理音频

【问题讨论】：

标签： javascript reactjs web-audio-api

【解决方案1】：

代码看起来不错。我怀疑这里的问题是ScriptProcessor 令人窒息。因为它无法在下一次调用onaudioprocess 之前及时完成onaudioprocess 的执行。这通常会导致这种随机行为。

一个简单的尝试是使用 ScriptProcessor 的 bufferSize 参数。有时增加它可能会有所帮助。

另一个可能的解决方案是将 AudioBuffers 的串联移动到 WebWorker，这样主线程就可以准备执行下一个 onaudioprocess。我相信像 recorder.js 这样的库可以做到这一点。

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

【讨论】：