search

hackingbeauty / react-mic

Record audio from a user's microphone and display a cool visualization.
https://hackingbeauty.github.io/react-mic/
450 stars 157 forks source link

Allow support for Safari Browser #51

Closed trojanh closed 5 years ago

trojanh commented 6 years ago

Current this Package doesnt work on Safari, we get following error on console:

Unhandled Promise Rejection: ReferenceError: Can't find variable: MediaRecorder
(anonymous function) — MicrophoneRecorder.js:61
promiseReactionJob
startRecording — MicrophoneRecorder.js:55

I have added audio-recorder-polyfill package to allow support for audio recording in Safari and Edge using polyfill.

hackingbeauty commented 6 years ago

@trojanh thanks you for this PR!!

However, I tested it out and the audio is not recording properly. There's a lot of static in the audio and I'm not sure why. I think it may be related to this issue in the audio-recorder-polyfill or the way WAV files need to be processed.

Can you help us figure this out? Thank you!!! :)

trojanh commented 5 years ago

Hi @hackingbeauty I was trying to find a solution to the problem you mentioned. Then I discovered this https://github.com/addpipe/simple-recorderjs-demo which uses Recorderjs to record audio. I tested it on Safari, Chrome and Firefox and seemed to me it works best.

I also explored your code and found that you aren't using Recorderjs so I wasn't able to integrate it. I wanted explore this and then we can collectively use it here.

You can start with demo here

Also worth checking web-audio-recorder demo and implementation.

As per what I have learned, its seems Media Recorder API is specifically not supproted by Safari and IE and also doesnt allow us to get audio in mp3 format. So we can consider Recorderjs and Web Audio Recorder apis.

Let me know your thoughts if you have already brainstromed these APIs.

hackingbeauty commented 5 years ago

Sorry, not merging this. Doesn't work.