search

samhirtarif / react-audio-recorder

An audio recording helper for React. Provides a component and a hook to help with audio recording.
https://www.npmjs.com/package/react-audio-voice-recorder
208 stars 62 forks source link

Corrupt "mp3" audio is really webm #54

Closed theDanielJLewis closed 1 year ago

theDanielJLewis commented 1 year ago

Using the sample code, when I set downloadFileExtension="mp3", something is downloaded with a .mp3 file extension, but it's not an MP3. Attempting to play it yields only a loud corrupt sound.

The file is actually still a .webm and changing the extension to .webm makes it playable.

So what's the point of setting the extension to MP3 or WAV if it doesn't actually give an MP3 or WAV? Or is this simply broken?

samhirtarif commented 1 year ago

@theDanielJLewis - That is strange, this is something I had thoroughly tested. Thanks for bringing this up though. Could you please share which browser and OS you were using when this happened?

samhirtarif commented 1 year ago

I guess I was wrong in assuming the downloaded files actually are mp3 and wav just because they played successfully on windows, android and iOS. They are indeed in webm format, despite creating a new blob with the appropriate audio mime type for downloading. I'll have to spend some time on this.

theDanielJLewis commented 1 year ago

I'm guessing it's simply because that's how modern browsers now capture audio.

That I now know it records only in webm means I can find a way to handle the conversion to MP3. In my use case, the audio will be downloaded by someone other than the person who records it.

samhirtarif commented 1 year ago

Ah, I see. Sorry for the trouble caused. I would be interested in knowing if you use some existing package/library for the webm to mp3 conversion.

samhirtarif commented 1 year ago

Fixed by Pull request #59 Would require the website to be cross-origin isolated. Otherwise, only webm format can be downloaded

AwesomeZaidi commented 1 year ago

@samhirtarif can you include an example of how to make say my website built in say Next JS, cross-origin isolated?

Overdrive141 commented 1 year ago

@samhirtarif can you include an example of how to make say my website built in say Next JS, cross-origin isolated?

https://vercel.com/guides/fix-shared-array-buffer-not-defined-nextjs-react

NavidulHoque commented 2 weeks ago

there is a bug in the package. whenever i used recorderControls prop on the AudioRecorder component then while recording when i want to discard the recording, it just uploads it instead of discarding it, so i think this need to be solved