Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
module.exports = {
root: true,
env: { browser: true, es2020: true
},
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:tailwindcss/recommended",
],
ignorePatterns: [
"dist",
".eslintrc.cjs"
],
parser: "@typescript-eslint/parser",
plugins: [
"react-refresh"
],
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true
},
],
"@typescript-eslint/consistent-type-imports": "error",
"tailwindcss/no-custom-classname": "off",
},
};

47 changes: 0 additions & 47 deletions .eslintrc.json

This file was deleted.

30 changes: 0 additions & 30 deletions .github/ISSUE_TEMPLATE/bug_report.md

This file was deleted.

21 changes: 0 additions & 21 deletions .github/workflows/lint.yml

This file was deleted.

13 changes: 0 additions & 13 deletions .github/workflows/test.yml

This file was deleted.

1 change: 0 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

Expand Down
18 changes: 0 additions & 18 deletions .storybook/main.cjs

This file was deleted.

3 changes: 0 additions & 3 deletions .storybook/preview-head.html

This file was deleted.

9 changes: 0 additions & 9 deletions .storybook/preview.cjs

This file was deleted.

8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ An audio recording helper for React. Provides a component and a hook to help wit

[![NPM downloads][npm-download-img]][npm-download-url]
[![Run ESlint][eslint-img]][eslint-url]
[![Run Unit tests][test-img]][test-url]
[![Run Unit tests][test-img]][test-url]

[npm-download-img]: https://img.shields.io/npm/dm/react-audio-voice-recorder.svg?style=round-square
[npm-download-url]: https://www.npmjs.com/package/react-audio-voice-recorder
Expand Down Expand Up @@ -47,12 +47,12 @@ const addAudioElement = (blob) => {

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<AudioRecorder
<AudioRecorder
onRecordingComplete={addAudioElement}
audioTrackConstraints={{
noiseSuppression: true,
echoCancellation: true,
}}
}}
downloadOnSavePress={true}
downloadFileExtension="webm"
/>
Expand Down Expand Up @@ -139,7 +139,7 @@ const ExampleComponent = () => {

return (
<div>
<AudioRecorder
<AudioRecorder
onRecordingComplete={(blob) => addAudioElement(blob)}
recorderControls={recorderControls}
/>
Expand Down
1 change: 1 addition & 0 deletions dist/assets/worker-224792ee.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 18 additions & 0 deletions dist/components/AudioRecordingComponent.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import type { ReactElement } from "react";
import type { Props } from "./interfaces";
/**
* Usage: https://github.com/samhirtarif/react-audio-recorder#audiorecorder-component
*
*
* @prop `onRecordingComplete` Method that gets called when save recording option is clicked
* @prop `recorderControls` Externally initilize hook and pass the returned object to this param, this gives your control over the component from outside the component.
* https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
* @prop `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
* @prop `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
* @prop `downloadOnSavePress` If set to `true` the file gets downloaded when save recording is pressed. Defaults to `false`
* @prop `downloadFileExtension` File extension for the audio filed that gets downloaded. Defaults to `mp3`. Allowed values are `mp3`, `wav` and `webm`
* @prop `showVisualizer` Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
* @prop `classes` Is an object with attributes representing classes for different parts of the component
*/
declare const AudioRecorder: (props: Props) => ReactElement;
export default AudioRecorder;
80 changes: 80 additions & 0 deletions dist/components/interfaces.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import type { MediaAudioTrackConstraints, recorderControls } from "../hooks/useAudioRecorder";
interface StyleProps {
/**
* Applies passed classes to audio recorder container
**/
AudioRecorderClass?: string;
/**
* Applies passed classes to audio recorder start/save option
**/
AudioRecorderStartSaveClass?: string;
/**
* Applies passed classes to audio recorder timer
**/
AudioRecorderTimerClass?: string;
/**
* Applies passed classes to audio recorder status option
**/
AudioRecorderStatusClass?: string;
/**
* Applies passed classes to audio recorder pause/resume option
**/
AudioRecorderPauseResumeClass?: string;
/**
* Applies passed classes to audio recorder discard option
**/
AudioRecorderDiscardClass?: string;
}
export interface Props {
/**
* This gets called when the save button is clicked.
* In case the recording is cancelled, the blob is discarded.
**/
onRecordingComplete?: (blob: Blob) => void;
/**
* This gets called when the getUserMedia Promise is rejected.
* It takes the resultant DOMException as its parameter.
**/
onNotAllowedOrFound?: (exception: DOMException) => void;
/**
* Allows calling of hook outside this component. The controls returned by the hook can then be passed to the component using this prop.
* This allows for use of hook methods and state outside this component
* @sample_usage https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
**/
recorderControls?: recorderControls;
/**
* Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of
* `MediaTrackConstraints` that apply to the audio track
*
* @Property `deviceId`
* @Property `groupId`
* @Property `autoGainControl`
* @Property `channelCount`
* @Property `echoCancellation`
* @Property `noiseSuppression`
* @Property `sampleRate`
* @Property `sampleSize`
*/
audioTrackConstraints?: MediaAudioTrackConstraints;
/**
* If set to `true` the file gets downloaded when save recording is pressed
**/
downloadOnSavePress?: boolean;
/**
* File extension for the audio filed that gets downloaded
**/
downloadFileExtension?: "mp3" | "wav" | "webm";
/**
* Displays a waveform visualization for the audio when set to `true`. Defaults to `false`
**/
showVisualizer?: boolean;
/**
* The options passed to the HTML MediaRecorder API.
**/
mediaRecorderOptions?: MediaRecorderOptions;
/**
* Custom classes to changes styles.
**/
classes?: StyleProps;
}
export {};
28 changes: 28 additions & 0 deletions dist/hooks/useAudioRecorder.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
export interface recorderControls {
startRecording: () => void;
stopRecording: () => void;
togglePauseResume: () => void;
recordingBlob?: Blob;
isRecording: boolean;
isPaused: boolean;
recordingTime: number;
mediaRecorder?: MediaRecorder;
}
export type MediaAudioTrackConstraints = Pick<MediaTrackConstraints, "deviceId" | "groupId" | "autoGainControl" | "channelCount" | "echoCancellation" | "noiseSuppression" | "sampleRate" | "sampleSize">;
/**
* @returns Controls for the recording. Details of returned controls are given below
*
* @param `audioTrackConstraints`: Takes a {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks subset} of `MediaTrackConstraints` that apply to the audio track
* @param `onNotAllowedOrFound`: A method that gets called when the getUserMedia promise is rejected. It receives the DOMException as its input.
*
* @details `startRecording`: Calling this method would result in the recording to start. Sets `isRecording` to true
* @details `stopRecording`: This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to false
* @details `togglePauseResume`: Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused`
* @details `recordingBlob`: This is the recording blob that is created after `stopRecording` has been called
* @details `isRecording`: A boolean value that represents whether a recording is currently in progress
* @details `isPaused`: A boolean value that represents whether a recording in progress is paused
* @details `recordingTime`: Number of seconds that the recording has gone on. This is updated every second
* @details `mediaRecorder`: The current mediaRecorder in use
*/
declare const useAudioRecorder: (audioTrackConstraints?: MediaAudioTrackConstraints, onNotAllowedOrFound?: (exception: DOMException) => void, mediaRecorderOptions?: MediaRecorderOptions) => recorderControls;
export default useAudioRecorder;
Loading