feat: load lazily mp3 encoding library for audio recorder

GetStream · Jun 19, 2024 · 405beeb · 405beeb
1 parent 11e606f
commit 405beeb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -61,7 +61,6 @@
   "dependencies": {
     "@babel/runtime": "^7.23.6",
     "@braintree/sanitize-url": "^6.0.4",
-    "@breezystack/lamejs": "^1.2.7",
     "@popperjs/core": "^2.11.5",
     "@react-aria/focus": "^3",
     "clsx": "^2.0.0",
@@ -99,6 +98,7 @@
     "mml-react": "^0.4.7"
   },
   "peerDependencies": {
+    "@breezystack/lamejs": "^1.2.7",
     "@emoji-mart/data": "^1.1.0",
     "@emoji-mart/react": "^1.1.0",
     "emoji-mart": "^5.4.0",

diff --git a/src/components/MediaRecorder/transcode/mp3.ts b/src/components/MediaRecorder/transcode/mp3.ts
@@ -1,4 +1,3 @@
-import { Mp3Encoder } from '@breezystack/lamejs';
 import { renderAudio, toAudioBuffer } from './audioProcessing';
 
 const ENCODING_BIT_RATE = 128; // kbps;
@@ -22,10 +21,11 @@ const splitDataByChannel = (audioBuffer: AudioBuffer) =>
   );
 
 export async function encodeToMp3(file: File, sampleRate: number) {
+  const lameJs = await import('@breezystack/lamejs');
   const audioBuffer = await renderAudio(await toAudioBuffer(file), sampleRate);
   const channelCount = audioBuffer.numberOfChannels;
   const dataByChannel = splitDataByChannel(audioBuffer);
-  const mp3Encoder = new Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
+  const mp3Encoder = new lameJs.Mp3Encoder(channelCount, sampleRate, ENCODING_BIT_RATE);
 
   const dataBuffer: Int8Array[] = [];
   let remaining = dataByChannel[0].length;