@exode-team/react-recorder 1.1.10 → 1.1.12

package/dist/index.js

@@ -182,6 +182,8 @@ const revokeObjectURL = (url) => {
  * @author: exode <hello@exode.ru>
  */
 const AUDIO_LEVEL_BARS = 40;
+/** Waveform decoding resamples to this rate — only the amplitude envelope matters */
+const WAVEFORM_SAMPLE_RATE = 44100;
 const createInitialLevels = () => Array.from({ length: AUDIO_LEVEL_BARS }, () => 0);
 const TIMELINE_SAMPLE_INTERVAL = 150;
 const TIMELINE_BAR_WIDTH = 3;
@@ -189,6 +191,64 @@ const TIMELINE_BAR_GAP = 2;
 const TIMELINE_BAR_MIN_HEIGHT = 3;
 const TIMELINE_BAR_MAX_HEIGHT = 24;
 
+/**
+ * MPEG frame scanner
+ *
+ * @author: exode <hello@exode.ru>
+ */
+const MPEG_LAYER_III = 1;
+const MPEG_SAMPLE_RATES = [44100, 48000, 32000];
+const MPEG_BITRATES_V1 = [0, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320, 0];
+const MPEG_BITRATES_V2 = [0, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 144, 160, 0];
+/** Length of the Layer III frame at the given offset, or 0 when it is not one */
+const readFrameLength = (bytes, offset) => {
+    if (offset + 3 >= bytes.length || bytes[offset] !== 0xff || (bytes[offset + 1] & 0xe0) !== 0xe0) {
+        return 0;
+    }
+    /** Version ids: 0 = MPEG 2.5, 1 = reserved, 2 = MPEG 2, 3 = MPEG 1 */
+    const version = (bytes[offset + 1] >> 3) & 0x03;
+    const layer = (bytes[offset + 1] >> 1) & 0x03;
+    const bitrateIndex = (bytes[offset + 2] >> 4) & 0x0f;
+    const sampleRateIndex = (bytes[offset + 2] >> 2) & 0x03;
+    const isReserved = version === 1
+        || layer !== MPEG_LAYER_III
+        || sampleRateIndex === 3
+        || bitrateIndex === 0
+        || bitrateIndex === 0x0f;
+    if (isReserved) {
+        return 0;
+    }
+    const isVersion1 = version === 3;
+    const padding = (bytes[offset + 2] >> 1) & 0x01;
+    const bitrate = (isVersion1 ? MPEG_BITRATES_V1 : MPEG_BITRATES_V2)[bitrateIndex] * 1000;
+    const sampleRate = MPEG_SAMPLE_RATES[sampleRateIndex] / (isVersion1 ? 1 : version === 2 ? 2 : 4);
+    return Math.floor((isVersion1 ? 144 : 72) * bitrate / sampleRate) + padding;
+};
+/**
+ * Some mp3 (e.g. converted from wma) keep junk between the ID3 tag and the
+ * first MPEG frame: media elements skip it, the WebAudio decoder does not.
+ * Returns the offset of the first real frame, or 0 when there is none.
+ */
+const findFirstFrameOffset = (bytes) => {
+    let start = 0;
+    /** ID3v2 header: "ID3" + version + flags + 4 syncsafe size bytes */
+    if (bytes.length >= 10 && bytes[0] === 0x49 && bytes[1] === 0x44 && bytes[2] === 0x33) {
+        start = 10 + ((bytes[6] << 21) | (bytes[7] << 14) | (bytes[8] << 7) | bytes[9]);
+        /** ID3v2.4 may append a 10 byte footer copy of the header */
+        if (bytes[5] & 0x10) {
+            start += 10;
+        }
+    }
+    for (let i = start; i < bytes.length - 3; i += 1) {
+        const length = readFrameLength(bytes, i);
+        /** Junk can open with a valid looking header, so require the next frame to follow */
+        if (length && readFrameLength(bytes, i + length)) {
+            return i;
+        }
+    }
+    return 0;
+};
+
 /**
  * Audio analyzer platform adapter
  *
@@ -215,34 +275,48 @@ const readFrequencyLevels = (analyser, barCount = AUDIO_LEVEL_BARS) => {
     }
     return levels;
 };
-const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
-    const context = new AudioContext();
+/** decodeAudioData detaches the buffer, so the retry re-reads the blob */
+const decodeSkippingJunk = async (context, blob) => {
     try {
-        const arrayBuffer = await blob.arrayBuffer();
-        const audioBuffer = await context.decodeAudioData(arrayBuffer);
-        const channelData = audioBuffer.getChannelData(0);
-        if (!channelData.length) {
-            return Array.from({ length: barCount }, () => 0);
-        }
-        const levels = [];
-        const segmentLength = Math.max(1, Math.floor(channelData.length / barCount));
-        for (let i = 0; i < barCount; i += 1) {
-            const segmentStart = i * segmentLength;
-            let sum = 0;
-            for (let j = 0; j < segmentLength; j += 1) {
-                const sample = channelData[segmentStart + j];
-                if (sample !== undefined) {
-                    sum += Math.abs(sample);
-                }
-            }
-            const average = sum / segmentLength;
-            levels.push(Math.min(100, average * 200));
+        return await context.decodeAudioData(await blob.arrayBuffer());
+    }
+    catch (error) {
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        const offset = findFirstFrameOffset(bytes);
+        if (!offset) {
+            throw error;
         }
-        return levels;
+        return context.decodeAudioData(bytes.buffer.slice(offset));
+    }
+};
+const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
+    /**
+     * Offline context stays out of the audio session. A realtime AudioContext
+     * registers as a WebAudio source, which pins WebKit to the AmbientSound
+     * category and leaves media playback silent inside iOS apps — including
+     * iPad apps running on macOS.
+     */
+    const context = new OfflineAudioContext(1, 1, WAVEFORM_SAMPLE_RATE);
+    const audioBuffer = await decodeSkippingJunk(context, blob);
+    const channelData = audioBuffer.getChannelData(0);
+    if (!channelData.length) {
+        return Array.from({ length: barCount }, () => 0);
     }
-    finally {
-        await context.close();
+    const levels = [];
+    const segmentLength = Math.max(1, Math.floor(channelData.length / barCount));
+    for (let i = 0; i < barCount; i += 1) {
+        const segmentStart = i * segmentLength;
+        let sum = 0;
+        for (let j = 0; j < segmentLength; j += 1) {
+            const sample = channelData[segmentStart + j];
+            if (sample !== undefined) {
+                sum += Math.abs(sample);
+            }
+        }
+        const average = sum / segmentLength;
+        levels.push(Math.min(100, average * 200));
     }
+    return levels;
 };
 
 /**
@@ -256,6 +330,9 @@ const fetchAudioBlob = async (url, signal) => {
         mode: 'cors',
         credentials: 'omit',
     });
+    if (!response.ok) {
+        throw new Error(`Failed to fetch audio: ${response.status}`);
+    }
     return response.blob();
 };
 
@@ -888,7 +965,10 @@ const useAudioBlobLoader = (options) => {
     const objectUrlRef = useRef(null);
     const abortControllerRef = useRef(null);
     const failedSrcRef = useRef(null);
+    const waveformTokenRef = useRef(0);
+    const waveformDataRef = useRef(waveformData);
     const callbacksRef = useRef(playbackCallbacks);
+    waveformDataRef.current = waveformData;
     callbacksRef.current = playbackCallbacks;
     const createAudioFromBlob = useCallback((blob) => {
         if (objectUrlRef.current) {
@@ -911,15 +991,33 @@ const useAudioBlobLoader = (options) => {
         audioRef.current = audio;
         setIsLoaded(true);
     }, []);
+    /**
+     * Waveform is cosmetic: some files (e.g. mp3 with junk before the first
+     * frame) fail to decode in Safari while playing fine, so a decode error
+     * must never block playback. Token keeps only the latest decode.
+     */
+    const applyWaveformLevels = useCallback(async (blob) => {
+        if (waveformData) {
+            return;
+        }
+        waveformTokenRef.current += 1;
+        const token = waveformTokenRef.current;
+        try {
+            const levels = await decodeAudioLevels(blob);
+            if (token === waveformTokenRef.current) {
+                setWaveformLevels(levels);
+            }
+        }
+        catch (error) {
+            console.warn('[voice-player] Failed to decode waveform', error);
+        }
+    }, [waveformData]);
     const mountFromBlob = useCallback(async (blob) => {
         if (audioRef.current) {
             return;
         }
         setIsLoading(true);
         try {
-            if (!waveformData) {
-                setWaveformLevels(await decodeAudioLevels(blob));
-            }
             createAudioFromBlob(blob);
         }
         catch (error) {
@@ -928,12 +1026,19 @@ const useAudioBlobLoader = (options) => {
         finally {
             setIsLoading(false);
         }
-    }, [waveformData, createAudioFromBlob]);
-    const ensureAudioLoaded = useCallback(async () => {
+        void applyWaveformLevels(blob);
+    }, [applyWaveformLevels, createAudioFromBlob]);
+    const ensureAudioLoaded = useCallback(async (options) => {
         var _a;
-        if (audioRef.current || failedSrcRef.current === src) {
+        if (audioRef.current) {
             return;
         }
+        if (failedSrcRef.current === src) {
+            if (!(options === null || options === void 0 ? void 0 : options.retryFailed)) {
+                return;
+            }
+            failedSrcRef.current = null;
+        }
         if (preloadedBlob) {
             return mountFromBlob(preloadedBlob);
         }
@@ -949,14 +1054,8 @@ const useAudioBlobLoader = (options) => {
             if (controller.signal.aborted) {
                 return;
             }
-            if (!waveformData) {
-                const levels = await decodeAudioLevels(blob);
-                if (controller.signal.aborted) {
-                    return;
-                }
-                setWaveformLevels(levels);
-            }
             createAudioFromBlob(blob);
+            void applyWaveformLevels(blob);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === 'AbortError') {
@@ -970,13 +1069,16 @@ const useAudioBlobLoader = (options) => {
                 setIsLoading(false);
             }
         }
-    }, [src, waveformData, preloadedBlob, mountFromBlob, createAudioFromBlob]);
+    }, [src, preloadedBlob, mountFromBlob, applyWaveformLevels, createAudioFromBlob]);
     /** Cleanup on src change or unmount */
     useEffect(() => {
         failedSrcRef.current = null;
+        /** Drop the previous waveform so a failed decode cannot leave a foreign one */
+        setWaveformLevels(waveformDataRef.current || createInitialLevels());
         return () => {
             var _a;
             (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
+            waveformTokenRef.current += 1;
             if (audioRef.current) {
                 cleanupAudio(audioRef.current);
                 audioRef.current = null;
@@ -995,6 +1097,7 @@ const useAudioBlobLoader = (options) => {
     }, [preloadedBlob, mountFromBlob]);
     useEffect(() => {
         if (waveformData) {
+            waveformTokenRef.current += 1;
             setWaveformLevels(waveformData);
         }
     }, [waveformData]);
@@ -1100,7 +1203,7 @@ const useVoiceMessagePlayer = (options) => {
             return;
         }
         audioPlaybackManager.stopOthers(stopThis);
-        void ensureAudioLoaded().then(() => {
+        void ensureAudioLoaded({ retryFailed: true }).then(() => {
             const audio = audioRef.current;
             if (audio) {
                 audio.play()
@@ -1160,7 +1263,7 @@ const useVoiceMessagePlayer = (options) => {
                 .catch(() => setIsPlaying(false));
         }
         else {
-            void ensureAudioLoaded().then(() => {
+            void ensureAudioLoaded({ retryFailed: true }).then(() => {
                 const loadedAudio = audioRef.current;
                 if (loadedAudio) {
                     audioPlaybackManager.stopOthers(stopThis);