@speechmatics/browser-audio-input-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "@speechmatics/browser-audio-input-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "React hooks for managing audio inputs and permissions across browsers",
@@ -25,3 +25,3 @@ "type": "module",
   "dependencies": {
-    "@speechmatics/browser-audio-input": "1.0.1"
+    "@speechmatics/browser-audio-input": "1.0.2"
   },
@@ -28,0 +28,0 @@ "author": "",

README.md

@@ -80,19 +80,77 @@ # Browser audio input (React)
 ```TSX
-import { PcmAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
+import { PCMAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
 
 function App() {
   return (
-    <PcmAudioRecorderProvider workletScriptURL="/path/to/pcm-audio-worklet.min.js">
+    // See note in the next section about the AudioWorklet script
+    <PCMAudioRecorderProvider workletScriptURL="/path/to/pcm-audio-worklet.min.js">
       <Component>
-    </PcmAudioRecorderProvider>
+    </PCMAudioRecorderProvider>
   );
 }
 
-// Now all child components can use the provided hooks
+```
+Now all child components can use the provided hooks:
 
+### Start/stop recording
+
+The only required argument to `startRecording` is an [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext). Note that 
+
+`stopRecording` stops the active `MediaStream` source, but leaves the `AudioContext` open, so it can be re-used.
+
+```TSX
+function RecordingButton() {
+  const { startRecording, stopRecording, isRecording } = usePCMAudioRecorder();
+
+  const onClick = () => {
+    if (isRecording) {
+      stopRecording();
+    } else {
+      const audioContext = new AudioContext();
+      startRecording({ audioContext });
+    }
+  }
+
+  return <button onClick={onClick}>
+    {isRecording ? "Stop recording" : "Start recording" }
+  </button>
+}
+```
+You can specify the device for recording by passing the `deviceId`option to `startRecording`.
+
+
+#### Recording options
+
+You can pass whatever ['MediaTrackSettings'](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings) you want through the `recordingOptions` property:
+
+```typescript
+    pcmRecorder.startRecording({
+      audioContext,
+      deviceId,
+      recordingOptions: {
+        noiseSuppression: false,
+      },
+    });
+```
+
+By default we enable the following to optimize for speech:
+
+```javascript
+{
+  noiseSuppression: true,
+  echoCancellation: true,
+  autoGainControl: true,
+}
+```
+
+Note that the last two [may not be supported in Safari](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints/autoGainControl#browser_compatibility)
+
+### Read recorded data
+
+Recorded data can be read from any child component of the context provider with the `usePCMAudioListener` hook:
+
+```TSX
+
 function Component() {
-  const { startRecording, stopRecording, mediaStream, isRecording } =
-    usePCMAudioRecorder();
-
-  usePCMAudioListener((audio) => {
+  usePCMAudioListener((audio: Float32Array) => {
     // Handle Float32Array of audio however you like
@@ -158,9 +216,9 @@ });
 // WEBPACK EXAMPLE
-import { PcmAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
+import { PCMAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
 
 function App() {
   return (
-    <PcmAudioRecorderProvider workletScriptURL="/js/pcm-audio-worklet.min.js">
+    <PCMAudioRecorderProvider workletScriptURL="/js/pcm-audio-worklet.min.js">
       <Component>
-    </PcmAudioRecorderProvider>
+    </PCMAudioRecorderProvider>
   );
@@ -177,3 +235,3 @@ }
 // VITE EXAMPLE
-import { PcmAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
+import { PCMAudioRecorderProvider } from '@speechmatics/browser-audio-input-react';
 import workletScriptURL from '@speechmatics/browser-audio-input/pcm-audio-worklet.min.js?url';
@@ -183,5 +241,5 @@
   return (
-    <PcmAudioRecorderProvider workletScriptURL={workletScriptURL}>
+    <PCMAudioRecorderProvider workletScriptURL={workletScriptURL}>
       <Component>
-    </PcmAudioRecorderProvider>
+    </PCMAudioRecorderProvider>
   );
@@ -188,0 +246,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

25938

6.59%

Number of lines in readme file

256

29.29%

Dependency changes

• + Added

  @speechmatics/browser-audio-input@1.0.2
  (transitive)

• - Removed

  @speechmatics/browser-audio-input@1.0.1
  (transitive)

• Updated

  @speechmatics/browser-audio-input@1.0.2