Add MediaTrackConstraints options for the audio track (#45)

Author: samhirtarif

README.md

@@ -29,7 +29,11 @@ const addAudioElement = (blob) => {
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <AudioRecorder 
-      onRecordingComplete={addAudioElement} 
+      onRecordingComplete={addAudioElement}
+      audioTrackConstraints={{
+        noiseSuppression: true,
+        echoCancellation: true,
+      }} 
       downloadOnSavePress={true}
       downloadFileExtension="mp3"
     />
@@ -40,6 +44,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 | Props  | Description | Default | Optional |
 | :------------ |:--------------- |:--------------- | :--------------- |
 | **`onRecordingComplete`**  | A method that gets called when "Save recording" option is pressed | N/A | Yes |
+| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | N/A | Yes
 | **`downloadOnSavePress`**  | A `boolean` value that determines if the recording should be downloaded when "Save recording" option is pressed | `false` | Yes |
 | **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `mp3`, `wav` and `webm` | `mp3` | Yes |
 | **`classes`** | This allows class names to be passed to modify the styles for the entire component or specific portions of it | N/A | Yes |
@@ -48,6 +53,10 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 
 If you prefer to build up your own UI but take advantage of the implementation provided by this package, you can use this hook instead of the component
 
+| Params   | Description |
+| :------------ |:---------------|
+| **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track |
+
 The hook returns the following:
 
 | Identifiers   | Description |

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "1.1.3",
+  "version": "1.1.4",
   "license": "MIT",
   "author": "",
   "repository": {

package.json

@@ -16,13 +16,15 @@ import "../styles/audio-recorder.css";
  * @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 `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 `classes` Is an object with attributes representing classes for different parts of the component
  */
 const AudioRecorder: (props: Props) => ReactElement = ({
   onRecordingComplete,
   recorderControls,
+  audioTrackConstraints,
   downloadOnSavePress = false,
   downloadFileExtension = "mp3",
   classes,
@@ -36,7 +38,7 @@ const AudioRecorder: (props: Props) => ReactElement = ({
     isPaused,
     recordingTime,
     // eslint-disable-next-line react-hooks/rules-of-hooks
-  } = recorderControls ?? useAudioRecorder();
+  } = recorderControls ?? useAudioRecorder(audioTrackConstraints);
 
   const [shouldSave, setShouldSave] = useState(false);
 

src/components/AudioRecordingComponent.tsx

@@ -1,4 +1,7 @@
-import { recorderControls } from "../hooks/useAudioRecorder";
+import {
+  MediaAudioTrackConstraints,
+  recorderControls,
+} from "../hooks/useAudioRecorder";
 
 interface StyleProps {
   /**
@@ -39,6 +42,20 @@ export interface Props {
    * @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
    **/

src/components/interfaces.ts

@@ -11,9 +11,23 @@ export interface recorderControls {
   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
+ *
  * @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`
@@ -23,7 +37,9 @@ export interface recorderControls {
  * @details `recordingTime`: Number of seconds that the recording has gone on. This is updated every second
  * @details `mediaRecorder`: The current mediaRecorder in use
  */
-const useAudioRecorder: () => recorderControls = () => {
+const useAudioRecorder: (
+  audioTrackConstraints?: MediaAudioTrackConstraints
+) => recorderControls = (audioTrackConstraints) => {
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [recordingTime, setRecordingTime] = useState(0);
@@ -50,7 +66,7 @@ const useAudioRecorder: () => recorderControls = () => {
     if (timerInterval != null) return;
 
     navigator.mediaDevices
-      .getUserMedia({ audio: true })
+      .getUserMedia({ audio: audioTrackConstraints ?? true })
       .then((stream) => {
         setIsRecording(true);
         const recorder: MediaRecorder = new MediaRecorder(stream);

src/hooks/useAudioRecorder.ts

@@ -12,6 +12,12 @@ const addAudioElement = (blob: Blob) => {
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <AudioRecorder onRecordingComplete={(blob) => addAudioElement(blob)} />
+    <AudioRecorder 
+      onRecordingComplete={(blob) => addAudioElement(blob)} 
+      audioTrackConstraints={{
+        noiseSuppression: true,
+        echoCancellation: true,
+      }} 
+    />
   </React.StrictMode>
 );