react audio recorder

React-Audio-Voice-Recorder

Аудиозапись -помощник для React. Предоставляет компонент и крючок, чтобы помочь с аудиозаписи.

Установка

npm install react-audio-voice-recorder

yarn add react-audio-voice-recorder

Мигрирование из V1 → V2

Нарушение изменений

• В V2 AudioRecorder Prop downloadFileExtension больше не поддерживает mp3 и wav без веб-сайта, используя этот пакет, который является изолированным. Это изменение было сделано для решения проблемы № 54 в v1.2.1

Использование

Компонент AudioRecder (см. В действии)

Вы можете использовать нестандартный компонент, который принимает метод onRecordingComplete в качестве опоры и вызывает его при сохранении записи

 import React from "react" ;
import ReactDOM from "react-dom/client" ;
import { AudioRecorder } from 'react-audio-voice-recorder' ;

const addAudioElement = ( blob ) => {
  const url = URL . createObjectURL ( blob ) ;
  const audio = document . createElement ( "audio" ) ;
  audio . src = url ;
  audio . controls = true ;
  document . body . appendChild ( audio ) ;
} ;

ReactDOM . createRoot ( document . getElementById ( "root" ) ) . render (
  < React . StrictMode >
    < AudioRecorder 
      onRecordingComplete = { addAudioElement }
      audioTrackConstraints = { {
        noiseSuppression : true ,
        echoCancellation : true ,
      } } 
      downloadOnSavePress = { true }
      downloadFileExtension = "webm"
    />
  </ React . StrictMode >
) ;

Реквизит	Описание	По умолчанию	Необязательный
onRecordingComplete	Метод, который вызывается, когда нажата опция «Сохранить запись»	N/a	Да
audioTrackConstraints	Принимает подмножество MediaTrackConstraints , которые применяются к аудио -треку	N/a	Да
onNotAllowedOrFound	Это вызывается, когда обещание getUserMedia отвергается. Он принимает результирующее DOMException в качестве параметра	N/a	Да
downloadOnSavePress	boolean значение, которое определяет, следует ли загружать запись при нажатии параметра «Сохранить запись»	false	Да
downloadFileExtension	Расширение файла, которое будет использоваться для загруженного файла. Разрешенные значения - webm , mp3 и wav . Чтобы использовать mp3 или wav , убедитесь, что ваш веб-сайт изолирован перекрестным происхождением. Дальнейшее чтение	webm	Да
showVisualizer	Отображает визуализацию формы сигнала для аудио при установке true	false	Да
classes	Это позволяет передавать имена классов, чтобы изменить стили для всего компонента или определенных его частей	N/a	Да

Примечание. Для того, чтобы загрузить mp3 и wav для правильной работы, ваш сайт должен быть изолирован по перекрестному происхождению. Это необходимо, потому что в этом пакете используется FFMPEG, который внутренне использует SharedArrayBuffer , который требует изоляции кроссоригина

---

Useaudiorecorder Hook

Если вы предпочитаете создавать свой собственный пользовательский интерфейс, но воспользуйтесь реализацией, предоставленной этим пакетом, вы можете использовать этот крюк вместо компонента

Параметры	Описание	Необязательный
audioTrackConstraints	Принимает подмножество MediaTrackConstraints , которые применяются к аудио -треку	Да
onNotAllowedOrFound	Это вызывается, когда обещание getUserMedia отвергается. Он принимает результирующее DOMException в качестве параметра	Да

Крюк возвращает следующее:

Идентификаторы	Описание
startRecording	Вызывая этот метод запускает запись. Устанавливает isRecording true
stopRecording	Вызывая этот метод останавливает запись в процессе, и полученный звук доступен в recordingBlob . Устанавливает isRecording в false
togglePauseResume	Вызов этого метода приостановил бы запись, если он в настоящее время работает или возобновится, если он приостановился. Переключает ценность isPaused
recordingBlob	Это капля записи, созданный после того, как был вызван stopRecording
isRecording	Логическое значение, которое представляет, находится ли запись в настоящее время
isPaused	Логическое значение, которое представляет, будет ли приостановлена запись в процессе
recordingTime	Количество секунд, в которой прошла запись. Это обновляется каждую секунду
mediaRecorder	Текущий медиареатр -заказ в использовании. Может быть неопределенным в случае, если записи не в процессе

Пример использования крючка

  import { useAudioRecorder } from 'react-audio-voice-recorder' ;
  // ...
  // ...
  const {
    startRecording ,
    stopRecording ,
    togglePauseResume ,
    recordingBlob ,
    isRecording ,
    isPaused ,
    recordingTime ,
    mediaRecorder
  } = useAudioRecorder ( ) ;

  useEffect ( ( ) => {
    if ( ! recordingBlob ) return ;

    // recordingBlob will be present at this point after 'stopRecording' has been called
  } , [ recordingBlob ] )

---

Объедините крюк useAudioRecorder и компонент AudioRecorder

Это для сценариев, где вы хотели бы управлять компонентом AudioRecorder из -за пределов компонента. Вы можете позвонить в useAudioRecorder и передать объект, который он возвращается в recorderControls AudioRecorder . Это позволило бы вам контролировать компонент AudioRecorder из -за пределов компонента

Пример использования (см. В действии)

 import { AudioRecorder , useAudioRecorder } from 'react-audio-voice-recorder' ;

const ExampleComponent = ( ) => {
  const recorderControls = useAudioRecorder ( )
  const addAudioElement = ( blob ) => {
    const url = URL . createObjectURL ( blob ) ;
    const audio = document . createElement ( "audio" ) ;
    audio . src = url ;
    audio . controls = true ;
    document . body . appendChild ( audio ) ;
  } ;

  return (
    < div >
      < AudioRecorder 
        onRecordingComplete = { ( blob ) => addAudioElement ( blob ) }
        recorderControls = { recorderControls }
      />
      < button onClick = { recorderControls . stopRecording } > Stop recording </ button >
    </ div >
  )
}

ПРИМЕЧАНИЕ. При использовании как AudioRecorder , так и useAudioRecorder в комбинации, audioTrackConstraints и onNotAllowedOrFound должны быть предоставлены в крючке useAudioRecorder