Блог

В проекте React, написанном на машинописном языке, я использую «extendable-media-recorder» вместе с «extendable-media-recorder-wav-encoder» (ссылка на репозиторий). Этот пакет используется, чтобы позволить пользователю записывать свой голос. Это работает, когда пользователь записывает свой голос только один раз, но при повторной записи и остановке записи выдается следующая ошибка: Ошибка Media encoder

Эта ошибка выдается после того, как пользователь останавливает диктофон во второй раз, поэтому повторный запуск диктофона, похоже, работает. Я не понимаю, откуда эта ошибка, поскольку ошибка и способ ее возникновения указывают на то, что ошибка возникает из-за остановки рекордера во второй раз. Однако код для остановки рекордера улавливает потенциальные ошибки, тогда как ошибка указывает, что она не перехвачена.

Способ, которым я использую media-recorder в своем коде, заключается в следующем:

 import microphoneLogo from '../images/microphone.png'
import stopLogo from '../images/stop.png'

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

let mediaRecorder: any;
export default () => {
   const [microphoneOn, setMicrophone] = useState<boolean>(false)
   const [audioSetUp, setAudioSetUp] = useState<boolean>(false)
   
   //Instantiate the mediaRecorder and create an encoder object.
   async function setupAudioRecording() {
      let port;
      try {
         port = await connect();

         try {
            await register(port);
         } catch (e2) {
            console.log('E2: '   e2);
         }
      } catch (e1) {
         console.log('E1: '   e1);
      }
      const mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
      mediaRecorder = new MediaRecorder(mediaStream, {
         mimeType: 'audio/wav',
         audioBitsPerSecond: 44100,
      });
      setAudioSetUp(true);
   }

   async function startRecording() {
      try {
         mediaRecorder.start();
      } catch (e) {
         console.log(e);
      }
      mediaRecorder.addEventListener('dataavailable', ({ data }: any) => {
         put(data); //This method sends the blob data to the server to be processed
      });
   }

   async function stopRecording() {
      try {
         await mediaRecorder?.stop()
      } catch (e) {
         console.log(e);
      }
   }

   return (
      <div className="input">
         <input 
            className="input__microphone" 
            type="image" 
            src={microphoneOn ? stopLogo : microphoneLogo} 
            alt="Microphone"
            onClick={handleClick}
         />
      </div>
   )
}
  

Кто-нибудь знает, что вызывает эту ошибку и как я могу ее исправить? Возможные предложения относительно других библиотек аудиозаписей (совместимых с TypeScript) также более чем приветствуются.

Заранее большое спасибо.

Я только что наткнулся на это сегодня. В коде была ошибка, которая, как мы надеемся, исправлена в версии 6.1.56.

https://github.com/chrisguttandin/extendable-media-recorder/commit/8f639309b93061dd39233ee702c11515cb992d4d

Теперь он должен работать так, как ожидалось. Пожалуйста, не стесняйтесь открывать проблему на GitHub, если у вас возникнут какие-либо дополнительные проблемы.