Fix: [Record] a default value for constant bit rate (#3153)

* Fix: [Record] a default value for constant bit rate * Update recording example
katspaugh · Aug 31, 2023 · 6294c32 · 6294c32
1 parent 7fa6e1d
commit 6294c32
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/examples/record.js b/examples/record.js
@@ -15,30 +15,37 @@ const record = wavesurfer.registerPlugin(RecordPlugin.create())
 
 // Render recorded audio
 record.on('record-end', (blob) => {
-  const recordedUrl = URL.createObjectURL(blob)
   const container = document.querySelector('#recordings')
+  const recordedUrl = URL.createObjectURL(blob)
 
+  // Create wavesurfer from the recorded audio
   const wavesurfer = WaveSurfer.create({
     container,
     waveColor: 'rgb(200, 100, 0)',
     progressColor: 'rgb(100, 50, 0)',
     url: recordedUrl,
   })
-  wavesurfer.on('interaction', () => wavesurfer.playPause())
 
+  // Play button
+  const button = container.appendChild(document.createElement('button'))
+  button.textContent = 'Play'
+  button.onclick = () => wavesurfer.playPause()
+  wavesurfer.on('pause', () => (button.textContent = 'Play'))
+  wavesurfer.on('play', () => (button.textContent = 'Pause'))
+
+  // Download link
   const link = container.appendChild(document.createElement('a'))
   Object.assign(link, {
     href: recordedUrl,
     download: 'recording.' + blob.type.split(';')[0].split('/')[1] || 'webm',
     textContent: 'Download recording',
-    style: 'display: block; margin: 1rem 0 2rem',
   })
 })
 
-// Buttons
 {
-  // Start recording
+  // Record button
   const recButton = document.querySelector('#record')
+
   recButton.onclick = () => {
     if (record.isRecording()) {
       record.stopRecording()
@@ -68,5 +75,12 @@ record.on('record-end', (blob) => {
   <div id="mic" style="border: 1px solid #ddd; border-radius: 4px; margin-top: 1rem"></div>
 
   <div id="recordings" style="margin: 1rem 0"></div>
+
+  <style>
+    button {
+      min-width: 5rem;
+      margin: 1rem 1rem 1rem 0;
+    }
+  </style>
 </html>
 */
diff --git a/src/plugins/record.ts b/src/plugins/record.ts
@@ -7,7 +7,7 @@ import BasePlugin, { type BasePluginEvents } from '../base-plugin.js'
 export type RecordPluginOptions = {
   /** The MIME type to use when recording audio */
   mimeType?: MediaRecorderOptions['mimeType']
-  /** The audio bitrate to use when recording audio */
+  /** The audio bitrate to use when recording audio, defaults to 128000 to avoid a VBR encoding. */
   audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond']
   /** Whether to render the recorded audio, true by default */
   renderRecordedAudio?: boolean
@@ -18,13 +18,23 @@ export type RecordPluginEvents = BasePluginEvents & {
   'record-end': [blob: Blob]
 }
 
+const DEFAULT_BITS_PER_SECOND = 128000
+
 const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3']
 const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType))
 
 class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
   private stream: MediaStream | null = null
   private mediaRecorder: MediaRecorder | null = null
 
+  /** Create an instance of the Record plugin */
+  constructor(options: RecordPluginOptions) {
+    super({
+      ...options,
+      audioBitsPerSecond: options.audioBitsPerSecond ?? DEFAULT_BITS_PER_SECOND,
+    })
+  }
+
   /** Create an instance of the Record plugin */
   public static create(options?: RecordPluginOptions) {
     return new RecordPlugin(options || {})