sivaprakashdesingu / react-voice-recorder Goto Github PK

Hey, thanks for creating this package. I'm trying to customize the package to use my own UI. To do this, I need a way to call the startRecording and stopRecording methods from my own buttons. Can you provide any insight on how to do this?

When handleReset method is triggered then it also calls handleAudioStop

handleAudioStop should only get called when stop button is pressed

After recording i want to save the audio file into a variable like the actual file. File url will not work. because i want to use this with whisper api to translate and i need to send the actual file cannot send url.

core.js:6228 ERROR ReferenceError: Lame is not defined

Hello,

Does this record only in the default audio type for the browser, or can it support more audio types? I would like to record on the desktop web app, and play it back on iOS or Android devices.

Thank you,

Barry

Steps to reproduce:

press record, press clear, press record.

Error failed to start recording.

I have a fix ready that I have implemented locally. If you will allow me to contribute I will submit a pull request.

Hi I love your module but I need to expand functionality like css and another control on the recorder to toggle or not the recorder.

So I fork your repo install in my node react app but I am not able to use your module forked.
When I install your version in my node module it comes compiled but when I install my version It comes not compiled so I try running npm build but got an error.

Please can you give me advice to compile it ?

Thanks

In devices that do not have microphone, clicking on voice recorder show error.
Is there any way to avoid this error?
Thank you.

Hi, everything works fine - except that the Mic icon and the Close icon show their alt text... am I missing a library/CSS?

npm i react-voice-recorder
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from [email protected]
npm ERR! node_modules/react-voice-recorder
npm ERR! react-voice-recorder@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

After recording in preview html audio player the duration showing as "0:00". After click on the play button the duration the audio is showing is showing correctly "0:00:"0:05".

<Recorder
record={true}
title={"New recording"}
audioURL={audioDetails.url}
showUIAudio ={true}
hideHeader={true}
// handleOnChange={(value) => handleOnChange(value, 'firstname')}
handleAudioStop={data => handleAudioStop(data)}
mimeTypeToUseWhenRecording={audio/webm}

/>

I don't append blob for to send api. In server receive fd = null.

    const [audioDetails, setAudioDetails] = useState({
        url: null,
        blob: null,
        chunks: null,
        duration: {
            h: 0,
            m: 0,
            s: 0
        }
    })

    const handleAudioUpload = (file) => {
        var fd = new FormData();
        const blob = new Blob(audioDetails.chunks, { 'type': 'audio/ogg; codecs=opus' });
        fd.append('audio', blob);

        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                Accept: 'application/json',
                Authorization: bearerToken()
            },
            body: fd
        }
        fetch('/api/test', options)
            .then((xx) => console.log(xx))
   }

Can someone please let me know how to get the startRecording callback? Right now, we only have options for AudioStop...

I want to refactor this package so that handleAudioStop() takes a file as input rather than the blob/audio details (instead of handleAudioUpload). Essentially, I want to get rid of the upload button, as this is part of a form. I want to do the uploading of the file at the end of the form along with the other data.

Do you know what steps I can take to do this? I cannot find where the audio is converted from a blob to file.

Send blob objects to Nodejs server, but the server receives empty objects. Is there a reason?

How to customize the whole design?

Is react-voice-recorder supposed to work with Safari? It works well in Chrome and Firefox, but it doesn't record in Safari. Whatever solution I choose must work in Safari.

Thanks,

• John

Hello i have a issue with nextJS+React
./node_modules/react-voice-recorder/dist/microphone~pFtSEjGu.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Bit confused by this one as line 155 in Recorder.js is commented out but I'm still getting the svg console.logged every second during a recording:

Not a major issue but it would be good to remove.

Hi thanks for creating this package been working with it for a while works awesome as per my requirement, mate currently the output audio is given as a blob file, is there a way to implement audio file conversion to conventional audio types like mp3?

the recorder works fine on any browser tested on google chrome,safari (both in desktop mode and mobile responsive mode)

but tried to run a preview using localtunnel on my phone the recorder isn't showing at all
a tested it in chrome in default internet browser and in the google app, same negative result

hope you can fix it or suggest a fix it

The stopRecording function has to properly handle stop track recording as given in below url

https://pretagteam.com/question/remove-red-icon-after-recording-has-stopped