@exode-team/react-recorder 1.1.11 → 1.1.14

package/dist/index.js

@@ -28,6 +28,56 @@ const formatTime = (seconds) => {
     return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
 };
 
+/**
+ * AudioRecorder constants
+ *
+ * @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;
+const TIMELINE_BAR_GAP = 2;
+const TIMELINE_BAR_MIN_HEIGHT = 3;
+const TIMELINE_BAR_MAX_HEIGHT = 24;
+
+/**
+ * Pseudo waveform utilities
+ *
+ * @author: exode <hello@exode.ru>
+ */
+/** Deterministic generator: the same source always draws the same waveform */
+const seededRandom = (seed) => {
+    let state = Math.abs(Math.floor(seed)) % 2147483647 || 1;
+    return () => (state = state * 16807 % 2147483647) / 2147483647;
+};
+const hashString = (value) => {
+    let hash = 0;
+    for (let i = 0; i < value.length; i += 1) {
+        hash = (hash * 31 + value.charCodeAt(i)) | 0;
+    }
+    return hash;
+};
+/**
+ * Decorative levels for runtimes that cannot decode audio at all — WebAudio
+ * rejects every mp3 inside iPad apps running on macOS. Purely cosmetic: it
+ * stands in for a flat line and says nothing about the recording itself.
+ */
+const createPseudoLevels = (seed, barCount = AUDIO_LEVEL_BARS) => {
+    const random = seededRandom(hashString(seed));
+    const levels = [];
+    let level = 45 + random() * 25;
+    for (let i = 0; i < barCount; i += 1) {
+        /** Smooth drift instead of pure noise, so it reads as speech rather than static */
+        level = clampValue(level + (random() - 0.5) * 42, 14);
+        /** Slight fade at both ends — that is how a real recording usually looks */
+        levels.push(level * (0.72 + 0.28 * Math.sin((i / (barCount - 1)) * Math.PI)));
+    }
+    return levels;
+};
+
 /**
  * Microphone platform adapter
  *
@@ -133,6 +183,12 @@ const clearMediaSession = () => {
 };
 const createAudioPlayback = (url, callbacks) => {
     const audio = new Audio(url);
+    /**
+     * A detached element is not reliably rendered by every WebKit runtime
+     * (notably iPad apps running on macOS), so keep it in the document.
+     */
+    audio.style.display = 'none';
+    document.body.appendChild(audio);
     audio.onloadedmetadata = () => {
         callbacks.onLoadedMetadata(audio.duration);
     };
@@ -161,6 +217,7 @@ const createAudioPlayback = (url, callbacks) => {
 };
 const cleanupAudio = (audio) => {
     audio.pause();
+    audio.remove();
     audio.src = '';
     audio.onended = null;
     audio.ontimeupdate = null;
@@ -176,19 +233,6 @@ const revokeObjectURL = (url) => {
     URL.revokeObjectURL(url);
 };
 
-/**
- * AudioRecorder constants
- *
- * @author: exode <hello@exode.ru>
- */
-const AUDIO_LEVEL_BARS = 40;
-const createInitialLevels = () => Array.from({ length: AUDIO_LEVEL_BARS }, () => 0);
-const TIMELINE_SAMPLE_INTERVAL = 150;
-const TIMELINE_BAR_WIDTH = 3;
-const TIMELINE_BAR_GAP = 2;
-const TIMELINE_BAR_MIN_HEIGHT = 3;
-const TIMELINE_BAR_MAX_HEIGHT = 24;
-
 /**
  * MPEG frame scanner
  *
@@ -288,32 +332,32 @@ const decodeSkippingJunk = async (context, blob) => {
     }
 };
 const decodeAudioLevels = async (blob, barCount = AUDIO_LEVEL_BARS) => {
-    const context = new AudioContext();
-    try {
-        const audioBuffer = await decodeSkippingJunk(context, blob);
-        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);
-                }
+    /**
+     * Offline rendering keeps the audio hardware untouched. Runtimes that
+     * cannot decode at all (iPad apps on macOS reject every mp3) fall through
+     * to the caller, which draws a placeholder waveform instead.
+     */
+    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);
+    }
+    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;
-    }
-    finally {
-        await context.close();
+        const average = sum / segmentLength;
+        levels.push(Math.min(100, average * 200));
     }
+    return levels;
 };
 
 /**
@@ -961,18 +1005,12 @@ const useAudioBlobLoader = (options) => {
     const audioRef = useRef(null);
     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) {
-            revokeObjectURL(objectUrlRef.current);
-        }
-        const url = createObjectURL(blob);
-        objectUrlRef.current = url;
+    const createAudioFromUrl = useCallback((url) => {
         const { audio } = createAudioPlayback(url, {
             onLoadedMetadata: (dur) => callbacksRef.current.onLoadedMetadata(dur),
             onTimeUpdate: (time) => callbacksRef.current.onTimeUpdate(time),
@@ -988,13 +1026,22 @@ const useAudioBlobLoader = (options) => {
         audioRef.current = audio;
         setIsLoaded(true);
     }, []);
+    /** Local recordings have no url of their own, so they still go through a blob */
+    const createAudioFromBlob = useCallback((blob) => {
+        if (objectUrlRef.current) {
+            revokeObjectURL(objectUrlRef.current);
+        }
+        objectUrlRef.current = createObjectURL(blob);
+        createAudioFromUrl(objectUrlRef.current);
+    }, [createAudioFromUrl]);
     /**
      * 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) {
+    const applyWaveformLevels = useCallback(async (blob, seed) => {
+        /** Read through the ref: levels may arrive while the bytes are still loading */
+        if (waveformDataRef.current) {
             return;
         }
         waveformTokenRef.current += 1;
@@ -1007,8 +1054,12 @@ const useAudioBlobLoader = (options) => {
         }
         catch (error) {
             console.warn('[voice-player] Failed to decode waveform', error);
+            /** Some runtimes decode nothing at all — draw a placeholder instead of a flat line */
+            if (token === waveformTokenRef.current) {
+                setWaveformLevels(createPseudoLevels(seed));
+            }
         }
-    }, [waveformData]);
+    }, []);
     const mountFromBlob = useCallback(async (blob) => {
         if (audioRef.current) {
             return;
@@ -1023,53 +1074,51 @@ const useAudioBlobLoader = (options) => {
         finally {
             setIsLoading(false);
         }
-        void applyWaveformLevels(blob);
+        void applyWaveformLevels(blob, `${blob.size}`);
     }, [applyWaveformLevels, createAudioFromBlob]);
-    const ensureAudioLoaded = useCallback(async (options) => {
+    /** Waveform bytes are cosmetic, so nothing here may delay playback */
+    const loadWaveformSource = useCallback(async (url, cached) => {
         var _a;
-        if (audioRef.current) {
+        if (waveformDataRef.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);
-        }
-        if (!src) {
-            return;
+        if (cached) {
+            return applyWaveformLevels(cached, url);
         }
         (_a = abortControllerRef.current) === null || _a === void 0 ? void 0 : _a.abort();
         const controller = new AbortController();
         abortControllerRef.current = controller;
-        setIsLoading(true);
         try {
-            const blob = await fetchAudioBlob(src, controller.signal);
-            if (controller.signal.aborted) {
-                return;
+            const blob = await fetchAudioBlob(url, controller.signal);
+            if (!controller.signal.aborted) {
+                await applyWaveformLevels(blob, url);
             }
-            createAudioFromBlob(blob);
-            void applyWaveformLevels(blob);
         }
         catch (error) {
             if (error instanceof DOMException && error.name === 'AbortError') {
                 return;
             }
-            failedSrcRef.current = src;
-            console.warn('[voice-player] Failed to load audio', error);
+            console.warn('[voice-player] Failed to fetch waveform source', error);
         }
-        finally {
-            if (!controller.signal.aborted) {
-                setIsLoading(false);
-            }
+    }, [applyWaveformLevels]);
+    const ensureAudioLoaded = useCallback(async () => {
+        if (audioRef.current) {
+            return;
         }
-    }, [src, preloadedBlob, mountFromBlob, applyWaveformLevels, createAudioFromBlob]);
+        /** Only a recording that has not been uploaded yet has no url of its own */
+        if (!src) {
+            return preloadedBlob ? mountFromBlob(preloadedBlob) : undefined;
+        }
+        /**
+         * Remote files play straight from their url: it streams with range
+         * requests, keeps the user gesture (no await before play) and avoids
+         * blob sources, which some WebKit runtimes refuse to render.
+         */
+        createAudioFromUrl(src);
+        void loadWaveformSource(src, preloadedBlob);
+    }, [src, preloadedBlob, mountFromBlob, loadWaveformSource, createAudioFromUrl]);
     /** 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 () => {
@@ -1087,11 +1136,12 @@ const useAudioBlobLoader = (options) => {
             setIsLoaded(false);
         };
     }, [src]);
+    /** A cached recording mounts on its own only while it has no url yet */
     useEffect(() => {
-        if (preloadedBlob && !audioRef.current) {
+        if (preloadedBlob && !src && !audioRef.current) {
             void mountFromBlob(preloadedBlob);
         }
-    }, [preloadedBlob, mountFromBlob]);
+    }, [src, preloadedBlob, mountFromBlob]);
     useEffect(() => {
         if (waveformData) {
             waveformTokenRef.current += 1;
@@ -1200,7 +1250,7 @@ const useVoiceMessagePlayer = (options) => {
             return;
         }
         audioPlaybackManager.stopOthers(stopThis);
-        void ensureAudioLoaded({ retryFailed: true }).then(() => {
+        void ensureAudioLoaded().then(() => {
             const audio = audioRef.current;
             if (audio) {
                 audio.play()
@@ -1260,7 +1310,7 @@ const useVoiceMessagePlayer = (options) => {
                 .catch(() => setIsPlaying(false));
         }
         else {
-            void ensureAudioLoaded({ retryFailed: true }).then(() => {
+            void ensureAudioLoaded().then(() => {
                 const loadedAudio = audioRef.current;
                 if (loadedAudio) {
                     audioPlaybackManager.stopOthers(stopThis);