doppelgunner / audio-react-recorder Goto Github PK

Add support for react 18

Please give me suggestion for How to set Recording limit to max 20 seconds in audio-react-recorder

Hey,

I made an app that records audio. On desktop it works, but when I open the website on mobile. The whole thing crashes as soon as the recording is supposed to start. I don't know how to go any further. Does someone here have a solution for this?

The app is made in React 17.0.1.

Thanks in advance!

Unhandled Rejection (TypeError): AudioContext.createMediaStreamSource: Argument 1 is not an object.
AudioReactRecorder/_this.setUpRecording
src/index.js:125

  122 |    this.volume = this.context.createGain()
  123 | 
  124 |    // creates an audio node from teh microphone incoming stream
> 125 |    this.audioInput = this.context.createMediaStreamSource(this.stream)
      | ^  126 | 
  127 |    // Create analyser
  128 |    this.analyser = this.context.createAnalyser()

_temp3
src/index.js:272

  269 |      console.log('Error: Issue getting mic', err)
  270 |    }
  271 | 
> 272 |    this.setUpRecording()
      | ^  273 |  }
  274 | 
  275 |  start = async () => {

AudioReactRecorder/_this.setupMic
src/index.js:262

  259 |    draw()
  260 |  }
  261 | 
> 262 |  setupMic = async () => {
      | ^  263 |    //TODO: only get stream after clicking start
  264 |    try {
  265 |      window.stream = this.stream = await this.getStream()

AudioReactRecorder/_this.start
src/index.js:275

  272 |    this.setUpRecording()
  273 |  }
  274 | 
> 275 |  start = async () => {
      | ^  276 |    await this.setupMic()
  277 | 
  278 |    this.recording = true

doIfState
src/index.js:77

  74 | 
  75 |  doIfState(state, cb) {
  76 |    if (this.props.state == state) {
> 77 |      cb && cb()
     | ^  78 |    }
  79 |  }
  80 | 

checkState
src/index.js:70

  67 |       this.doIfState(RecordState.START, this.start)
  68 |       break
  69 |     default:
> 70 |       this.doIfState(RecordState.START, this.start)
     | ^  71 |       break
  72 |   }
  73 | }

componentDidUpdate
src/index.js:53

  50 |  componentDidUpdate(prevProps, prevState) {
  51 |    const { state } = this.props
  52 | 
> 53 |    this.checkState(prevProps.state, state)
     | ^  54 |  }
  55 | 
  56 |  checkState(previousState) {

There is a demo of this library on NPM. I tested it on both my Android phone and my roommate's phone. In both cases, it breaks. When pressing the "record" button (which is incorrectly labeled as the "start" button on the demo), nothing will record. When I test this in my local implementation, I get the error "cannot read peoperties of null (reading 'getAudioTracks')". It will work if I try to record after the initial break.

I recently saw someone posting about this bug in a different issue, although they were saying it was mac related. My implementation works fine on mac. There might be something else causing both of our problems as well as the bug currently in the demo.

Hey there
Is there a way to change the file to a Audio/wav mono 1 channel in 44,100 bitrate ?

Thanks in advance !

Get TypeError: Cannot read properties of null (reading 'getAudioTracks')
Works fine on Windows

Hey, sometimes ( but not every time ), when I start the recorder, it throws this error:

TypeError: self.context.close is not a function
ScriptProcessorNode._this.recorder.onaudioprocess src/index.js:164

161 | self.stream.getTracks().forEach(function (track) {
162 | track.stop()
163 | })
164 | self.context.close()
165 | ^ }
166 | }
167 | // we clone the samples

Any idea what is causing this?

Hello There,

I need 5 seconds of recording in wav format. But 5 second recording is 1.5 MB which is too large for the project. How can we reduce the size? how to set the bit rate to lower value to reduce file size?

Thanks in Advance.

Getting this issue when I deployed my code in the Linux server, in local it's working fine...!!!

index.modern.js:92 Uncaught (in promise) TypeError: Failed to execute 'createMediaStreamSource' on 'AudioContext': parameter 1 is not of type 'MediaStream'.
at AudioReactRecorder._this.setUpRecording (index.modern.js:92:1)
at _temp3 (index.modern.js:221:1)
at AudioReactRecorder._this.setupMic (index.modern.js:232:1)
at AudioReactRecorder._this.start (index.modern.js:240:1)
at AudioReactRecorder.doIfState (index.modern.js:368:1)
at AudioReactRecorder.checkState (index.modern.js:361:1)
at AudioReactRecorder.componentDidUpdate (index.modern.js:341:1)
at commitLayoutEffectOnFiber (react-dom.development.js:23173:1)
at commitLayoutMountEffects_complete (react-dom.development.js:24503:1)
at commitLayoutEffects_begin (react-dom.development.js:24489:1)
at commitLayoutEffects (react-dom.development.js:24427:1)
at commitRootImpl (react-dom.development.js:26634:1)
at commitRoot (react-dom.development.js:26502:1)
at performSyncWorkOnRoot (react-dom.development.js:25934:1)
at flushSyncCallbacks (react-dom.development.js:12104:1)
at react-dom.development.js:25471:1

Hi!

I just found your project and I really like the audio visualization while recording the audio!

One thing that would make styling AudioReactRecorder easier if you added to the

<div className='audio-react-recorder'>

the this.props.className inherited from the parent component. Something like this:

let className = 'audio-react-recorder'
if (this.props.className) {
    className += " "+this.props.className
}
...
<div className={className}>

This would make AudioReactRecorder work with https://styled-components.com/

There should be an error handling function, to make it easier, to make the error more clear to the user

I'm using this library to record a few phrases. After recording some phrases it records audio in a distorted way. On listening to that audio, they happen to occur distorted and in some kind of a robotic way. Need help in this.

The file size is too large,
almost every 10 seconds gets 2MB.
even change the type like "audio/amr" or "audio/mp3" has nothing effects on size

I have tried countless times with different settings but it's not showing anything in canvas when I open it in firefox but working in other browsers.

audio-react-recorder is working well on localhost. but when I built the project and hosted it to server (non-secure url). mic is neither accessible. when saw the site permissions, it shows microphone blocked and I am not able to enable it.

Please help.

Hey guys! 👋 I'd like to give this package a try in my current project. However, I am using React 17 right now, and audio-react-recorder requires 16.x.x. Can we add React 17 to the peer dependencies as well? Or would that take some more work?