Блог

У меня есть приложение в react с 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 вовремя для следующего вызова onaudioprocess . Обычно это приводит к такому случайному поведению.

Простая вещь, которую нужно попробовать, это поиграть с bufferSize параметром ScriptProcessor. Иногда это может помочь.

Другим возможным решением может быть перенос объединения аудиобуферов в WebWorker, чтобы основной поток был готов к выполнению следующего onaudioprocess . Я считаю, что библиотеки, такие как recorder.js сделайте это.

Наконец, вы также можете рассмотреть возможность использования чего-то вродеhttps://github.com/mattdiamond/Recorderjs или один из обновленных форков для этого