there's no way to control cancel button which is weird !!!!!

Hi, I hope you are doing well.

I am using this and it's just incredible. However, I am trying to change the color of the icons(of the pause button and play button). If it is possible to do, please tell me.

At the moment there is no way to reset the audio that has been stored.
onRecordingComplete will always be called if the component is rendered conditionally.

I suggest a resetRecording hook that does that.

Here's a weird issue!

I'm using only the recording part of this module, and then I use your audio player both immediately after recording and on a separate page where the recordings are loaded from their storage.

The problem I've noticed is that the .webm (or renamed to .opus) files recorded with this module do not trigger a "stop" when fully played in your player.

I've tried other .webm files and they work fine, but all the .webm files from this recorder keep the player in a "playing" state even though the audio has ended.

The play/pause button remains paused and you have to click it twice before playback can start over.

I've used the player code exactly from the examples and it works fine when I use your demo audio file. But if I change only the src to one recorded with this audio recorder, that file has a problem.

Here's a file you can try yourself for testing:

https://www.dropbox.com/s/50ynqgkn0kc9p70/recorded-test.webm?dl=1

Describe the bug
There seems to be problems with types.

When I import the component and hook from the package, like so

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

I have this issue with the import:

Could not find a declaration file for module 'react-audio-voice-recorder'. '/home/oscar/Desktop/workspaces/front/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-audio-voice-recorder/dist/react-audio-voice-recorder.es.js' implicitly has an 'any' type.
  There are types at '/home/oscar/Desktop/workspaces/front/node_modules/react-audio-voice-recorder/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports".The 'react-audio-voice-recorder' library may need to update its package.json or typings.ts(7016)

Package info (please complete the following information):

• Version 2.1.2

Is it possible to set the recording to wav using hooks?

const {
    startRecording,
    stopRecording,
    togglePauseResume,
    recordingBlob,
    isRecording,
    isPaused,
    recordingTime,
    mediaRecorder,
  } = useAudioRecorder({noiseSuppression: true, echoCancellation: true});

useEffect(() => {
    if (!recordingBlob) return;
    console.log('recording blob', recordingBlob);
    console.log('mediaRecorder: ', mediaRecorder?.mimeType);
    addAudioElement(recordingBlob);
  }, [recordingBlob]);

 const addAudioElement = (blob: any) => {
    console.log('done');
    const url = URL.createObjectURL(blob);
    const audio = document.createElement('audio');
    audio.src = url;
    audio.controls = true;
    console.log(audio);
    setRecording(audio.src);
    setBlob(blob);
  };

Thanks!

please provide me solution in React js.

Describe the bug
Getting Unexpected token 11 on browsers without es11 support.

To Reproduce
Steps to reproduce the behavior:

1. Run the Audio Player on Chrome version older than 80.
2. It's started crashing with unexpected token ? on line 639 in react-audio-voice-recorder.es.js

Expected behavior
It should work on browsers without es11 support too.

Package info (please complete the following information):

• Version: ^2.2.0

Background

As a user, I would like to capture the user's audio every second while they are speaking and convert it to text using an ASR (Automatic Speech Recognition) service. I expect to receive the audio recordings as blobs.

this error is occurring with the build, it is running fine in local environment.
"build": "vite build",
"vite": "^3.2.4"

There isn't a good solution for recording microphone and system sound at the same time, when I see this project I find it can Specify the deviceId, so I have this idea that if we can solve this problem by react-audio-recorder.

Hello,

In NextJs, when I'm starting the development mode, I get the following error in the terminal:
"vite-plugin-css-injected-by-js ReferenceError: document is not defined".

Everything works fine, but this error is present in the terminal.

I am using the latest version of the package.

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?

Hi there.
I wanted to use this library's hooks but can't access to recordingBlob.

Hook usage
const {
startRecording,
stopRecording,
togglePauseResume,
recordingBlob,
isRecording,
isPaused,
recordingTime,
} = useAudioRecorder();

const handleSave = () => {
stopRecording();
setBlob(recordingBlob);
};

** Usage: user can toggle pause/resume as much as they want. But once they press pause button, save button will appear and they can either save or discard it. Save button is implemented by handleSave function

Is there a callback if recording permission is denied or disabled by default (e.g. chrome app on an iphone)? Would be nice to signal to the user to enable microphone permission

I've tried the example from the Readme also.
https://stackblitz.com/edit/react-ts-ryj6jz?file=App.tsx

But it doesn't record anything.
is this an issue, or there is just no support?

Encountered this issue when build prod

�[0mFailed to compile.

./node_modules/react-audio-voice-recorder/dist/react-audio-visualize.es.0ccda538.mjs
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)

�[91merror Command failed with exit code 1.
�[0minfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The command '/bin/sh -c yarn build-prod' returned a non-zero code: 1

Hello there,

While experiencing the react-audio-voice-recorder, when the user clicks to discard the recorded audio, it behaves same as if save recording button is clicked.

Describe the bug
When I run my dev server, i get the following warnings (everything works though)

Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/RecordAudio.tsx' file: Error: ENOENT: no such file or directory, open '/home/phil//node_modules/react-microphone-recorder/src/RecordAudio.tsx'

Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/index.ts'

Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/useAudioLevels.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/useAudioLevels.ts'

Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/useRecorder.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/useRecorder.ts'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/react-microphone-recorder/dist/esm/RecordAudio.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/RecordAudio.tsx' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/RecordAudio.tsx'

WARNING in ./node_modules/react-microphone-recorder/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/index.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/index.ts'

WARNING in ./node_modules/react-microphone-recorder/dist/esm/useAudioLevels.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/useAudioLevels.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/useAudioLevels.ts'

WARNING in ./node_modules/react-microphone-recorder/dist/esm/useRecorder.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/phil/node_modules/react-microphone-recorder/src/useRecorder.ts' file: Error: ENOENT: no such file or directory, open '/home/phil/node_modules/react-microphone-recorder/src/useRecorder.ts'

I start my dev server using this script: "dev": "cp ./envs/.env.local ./.env && react-scripts start",

To Reproduce
I installed the package "react-microphone-recorder": "^1.0.0",
and import it like this import { useRecorder } from 'react-microphone-recorder';

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Package info (please complete the following information):

• ^1.0.0

Additional context
"react": "^18.2.0",

Describe the bug
Even after setting downloadFileExtension="wav" - the outputted audio file doc_type is still webm.

I see in the documentation that it is mentioned several times, my website must be cross-origin isolated and it gives links to a relatively vague Google article.

I am building a next js web app so in my next.config.js i made these changes in hopes to make my site cross-origin isolated, but i'm not sure if this is the right?

const nextConfig = {
  reactStrictMode: false,
  i18n,

  // Add headers for cross-origin isolation
  async headers() {
    return [
      {
        source: "/(.*)", // change to appropriate path
        headers: [
          {
            key: "Cross-Origin-Embedder-Policy-Report-Only",
            value: "require-corp",
          },
          {
            key: "Cross-Origin-Opener-Policy-Report-Only",
            value: "same-origin",
          },
        ],
      },
    ];
  },
};

Expected behavior
Can we provide documentation examples for how to cross-origin isolate a react or next js app? This is currently blocking my team from using this awesome package!

how to access the stream to e.g. display volume? Would you consider exporting that?

How to hide save recording and pause elements in recorder?

When I do

const Home: NextPage = () => {

	const recorderControls = useAudioRecorder();

	const addAudioElement = (blob: Blob | MediaSource) => {

		const url = URL.createObjectURL(blob);
		console.log(url);
		const audio = document.createElement('audio');

		audio.src = url;
		audio.controls = true;
		document.body.appendChild(audio);
	};

	return (
		<div>
			<AudioRecorder
				onRecordingComplete={(blob) => addAudioElement(blob)} />
		</div>
	);
};
export default Home;

I get the following error

Module not found: Package path ./dist/hooks/useAudioRecorder is not exported from package C:\VRPM\Repos\stroll-gpt\node_modules\react-audio-voice-recorder (see exports field in C:\VRPM\Repos\stroll-gpt\node_modules\react-audio-voice-recorder\package.json)
   7 | import { GetStaticProps, NextPage } from 'next';
   8 | import { AudioRecorder } from 'react-audio-voice-recorder';
>  9 | import useAudioRecorder from 'react-audio-voice-recorder/dist/hooks/useAudioRecorder';
  10 | 
  11 | const Home: NextPage = () => {

I have the very latest version. What am I doing wrong here?

Describe the bug

Hi,

Is there any way i can change/style the canvas to show a waveform similar to the following image?

Screenshots

how to get blob file if i just use hook? because in hook there is no onRecordingComplete

Hey, love the library! I would like the ability to change the icons. Specifically, I want to replace the Save icon with something for Uploading (preferably my own SVG). Is there a way to do this now?

I tried to combine the hooks with the react element and it is not working, when I use startRecording() it begins to record but running the stopRecording() does not call the onComplete function I added, pressing the stop button myself on the UI does call it, also I see the record icon on the tab and on my windows bar even after the recording stopped.

I'm using the latest version of the project.

It would be nice if we could select the mimetype of the MediaRecorder format

I'm using the useAudioRecorder hook so I can have a custom UI but I'm not finding any way to change the file extension. I'd like to have the recording be an mp3 but best I can tell it has to be a 'webm' when using the hook. Is there any way to change this?

Hi, could you please help me with this error. When i try to import the AudioRecorder component i get this error :

./node_modules/react-audio-voice-recorder/dist/react-audio-voice-recorder.es.js 802:16
Module parse failed: Unexpected token (802:16)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  | h = J(() => {
  | v == null && navigator.mediaDevices.getUserMedia({
  audio: D ?? !0
  | }).then(p => {
  | I(!0);

NB. I'm trying to implement this example https://stackblitz.com/edit/react-ts-ryj6jz?file=package.json in my project, but i'm stuck with this bug.

Describe the bug
when I use useAudioRecorder only, it shows failed to load ffmpeg core.
but when I use hook and UI Components, it shows ok. how to solve it?

My Project based on NextJS 14.

here is my stack:

yarn run v1.22.21
$ next dev
   ▲ Next.js 14.0.4
   - Local:        http://localhost:3000

 ✓ Ready in 3.5s
 ○ Compiling /chat/[type] ...
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⨯ ./node_modules/@ffmpeg/ffmpeg/src/browser/defaultOptions.js:7:0
Module not found: Can't resolve '/node_modules/@ffmpeg/core/dist/ffmpeg-core.js'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@ffmpeg/ffmpeg/src/browser/index.js
./node_modules/@ffmpeg/ffmpeg/src/index.js
./app/(page)/chat/hooks/useAudio.tsx
./app/(page)/chat/_component/audio-chat/audio-chat.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 ✓ Compiled /favicon.ico in 161ms (485 modules)

To Reproduce
Steps to reproduce the behavior:

Expected behavior
run success.

Screenshots

Package info (please complete the following information):

• Version [e.g. 22]

Additional context
Add any other context about the problem here.

In mobile phones, when we want to stop a recording, we press the square icon, and that both stops the recording and triggers save. The experience here is different. Pressing the square icon stops the recording and discards it.

Can there be a prop I can pass to make the square button trigger recording complete as well?

Right now, the user has to press the floppy disc icon for the onRecordingComplete to trigger callback function. They may press the square icon from their experience. I would have to teach them to press the floppy icon instead.

I am having difficulty using recordingBlob. I keep drawing a null. Is it a conditional on stopRecording?

My code is below. I am using NextJS. Note the useEffect block.

"use client";

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

export default function Micthree() {
    const [blobby, setBlobby] = useState(null);
 
  
  const recorderControls = useAudioRecorder(
    {
      noiseSuppression: true,
      echoCancellation: true,
    },
    (err) => console.table(err) // onNotAllowedOrFound
  );
  const addAudioElement = (blob) => {
    const url = URL.createObjectURL(blob);
    const audio = document.createElement('audio');
    console.log(audio);
    audio.controls = true;
    document.body.appendChild(audio);
  };

  const {
    startRecording,
    stopRecording,
    togglePauseResume,
    recordingBlob,
    isRecording,
    isPaused,
    recordingTime,
    mediaRecorder
  } = useAudioRecorder();

  useEffect(() => {
    if (!recordingBlob) 
    {
        return;
    }
    else
    {
        setBlobby(recordingBlob);
        console.log("Blobby: ", blobby);
    }
 }, [recordingBlob])

  return (
    <div>
      <AudioRecorder
        onRecordingComplete={(blob) => addAudioElement(blob)}
        recorderControls={recorderControls}
  
        // downloadOnSavePress={true}
        // downloadFileExtension="mp3"
        showVisualizer={true}
      />
      <br />
      <button onClick={recorderControls.stopRecording}>Stop recording</button>
      <br />
    </div>
  );
}

I want to bring that play audio bar inside my chat box but it is coming on right side.

I think I am doing something wrong but it would be of great help if anyone can show me the correct way.

Could not find a declaration file for module 'react-audio-voice-recorder'. 'c:/Users/Mubashirullah/Documents/workspace/front/friction/node_modules/react-audio-voice-recorder/dist/react-audio-voice-recorder.es.js' implicitly has an 'any' type.
There are types at 'c:/Users/Mubashirullah/Documents/workspace/front/friction/node_modules/react-audio-voice-recorder/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'react-audio-voice-recorder' library may need to update its package.json or typing.

package.json:

{
  "name": "friction",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@chakra-ui/react": "^2.8.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.1.1",
    "@tremor/react": "^3.5.0",
    "axios": "^1.4.0",
    "framer-motion": "^10.13.1",
    "react": "^18.2.0",
    "react-audio-voice-recorder": "^2.1.2",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.45.2",
    "react-icons": "^4.10.1",
    "react-query": "^3.39.3",
    "react-router-dom": "^6.14.2",
    "validator": "^13.11.0",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",
    "zod": "^3.21.4",
    "zustand": "^4.3.9"
  },
  "devDependencies": {
    "@types/node": "^20.4.5",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@types/validator": "^13.9.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.27",
    "simple-zustand-devtools": "^1.1.0",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
  }
}

Describe the bug
Currently I want to get the recordingBlob every 30 seconds without calling stopRecording(). What I doing now is to call stopRecording and startRecording suddenly after it. However, it took around 1second to continue the recording and the audio between stopRecording and startRecording is not record. Is there any way to do it?

This is my implementation

  const recorderControls = useAudioRecorder();
  
useEffect(() => {
    if (!duringRecord) return;
    if (recorderControls.recordingTime === 30) {
      recorderControls.stopRecording();
    }
    if (recorderControls.recordingTime === 0) {
      recorderControls.startRecording();
    }
  }, [recorderControls.recordingTime]);



  useEffect(() => {
    if (!recorderControls.recordingBlob) return;
    setSecBlob(recorderControls.recordingBlob);
  }, [recorderControls.recordingBlob]);

  useEffect(() => {
    if (!secBlob) return;
    console.log("secBlob:" + secBlob);
    blobToTranscript(secBlob);
  }, [secBlob]);

// how I call the component

 <AudioRecorder
                    // onRecordingComplete={(audioBlob) =>
                    //   blobToTranscript(audioBlob)
                    // }
                    audioTrackConstraints={{
                      noiseSuppression: true,
                      echoCancellation: true,
                    }}
                    showVisualizer={true}
                    recorderControls={recorderControls}
                    classes={{
                      AudioRecorderClass: "recorder",
                      AudioRecorderTimerClass: "display-none",
                      AudioRecorderStatusClass:
                        "content status bg-gray-200 p-2 rounded",
                      AudioRecorderStartSaveClass: "display-none",
                      AudioRecorderPauseResumeClass: "display-none",
                      AudioRecorderDiscardClass: "display-none",
                    }}

Expected behavior
I want to let the recorder always record the audio. During the recoding, I want to get the 30sec chunks of the blob. ie 0-30sec, 30-60sec etc. continuously

Package info (please complete the following information):

• Version 2.1.2
• Nextjs 13.5.2

any idea on how best to upload the created blob to a node server or s3 in mp3 format?
directly send the blob, or use the hook's download function first?

Describe the bug
When I click on start recording, I am getting this error message
Cannot read properties of undefined (reading 'getUserMedia')
Package info (please complete the following information):
"react": "^18.2.0",
"react-audio-voice-recorder": "^2.2.0",

is there any support for Safari < v17 ? atm this recorder only supports webm and this makes it unusable for safari users which are not on the latest > 17 version. could you please make it downwards compatible or allow to use mp3 as file format?

Hello, great job on the package.

For our use case, we require lower level access to the parameters of getUserMedia(), specifically

We would like the ability to do something like that

navigator.mediaDevices
      .getUserMedia({ audio: {
          echoCancellation: false,
          noiseSuppression: false,
        }
      }

In IOS devices, downloaded file format is .mp4 and I could not detect why this happens. Please help me if anyone had similar issue.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Package info (please complete the following information):

• Version [e.g. 22]

Additional context
Add any other context about the problem here.

I got this error when I refresh the page, I am using Next.js. Please guide further.

Describe the bug
As it is currently built, this component is not accessible to keyboard users. Controls cannot take focus, accessible names & roles are not managed, etc.

To Reproduce
Steps to reproduce the behavior:

1. Try to bring focus to the component using your keyboard
2. Try to interact with the component with a keyboard after opening it

Expected behavior
All buttons should be focusable and be interactive using both keyboard and mouse.

Package info (please complete the following information):

• 2.2.0

When I startRecording in a useEffect on mount, then the recording time jumps a lot, sometimes skips 2 seconds etc.

useEffect(() => {
    startRecording();

    return () => startRecording();
  }, []);

Anyone know how to fix this?

Whenever I install react-audio-voice-recorder, my reactJS application fails to send messages correctly to the API.
What's going on? It breaks as soon as I install it every time.

Currently, I know when the recording is done the audio is rendered in '.weba' format. I was wondering whether it is possible to render it in another format.

Describe the bug
When trying to record audio on my android chrome (version 116.0.5845.163) the audio is very distorted and almost like the recorder is stopping and starting in between.

Attaching the example audio below recorded from the stackblitz demo link
I am saying hello three to four times in the audio.

It's not happening on all people's browsers and my phone's microphone is working fine already tested that.

Audio file
48787e2a-446c-4a88-a392-69d998550fdd.webm

u.roundRect is not a function. (In 'u.roundRect(a,c,f,l,50)', 'u.roundRect' is undefined)

I'm getting this error on Safari when trying to use the record feature (which crashes the whole browser). Happy to provide more details if needed, unfortunately can't seem to see what is causing it..