@exode-team/react-recorder 1.1.11 → 1.1.14

package/README.md

@@ -146,7 +146,7 @@ const Messages = () => {
 | `duration`      | `number`                       | —          | —            | Длительность в секундах (отображается до загрузки аудио).                                   |
 | `autoPreload`   | `boolean`                      | —          | `true`       | Автозагрузка аудио при попадании в viewport (IntersectionObserver).                          |
 | `waveformData`  | `number[]`                     | —          | —            | Предварительно вычисленные уровни waveform.                                                 |
-| `preloadedBlob` | `Blob \| null`                 | —          | —            | Blob для мгновенного воспроизведения без сетевого запроса.                                   |
+| `preloadedBlob` | `Blob \| null`                 | —          | —            | Локальная запись. Играет из него, только пока нет `src`; при заданном `src` идёт на него, а blob переиспользуется для waveform. |
 | `onEnded`       | `() => void`                   | —          | —            | Колбэк окончания воспроизведения.                                                           |
 | `className`     | `string`                       | —          | —            | CSS-класс контейнера.                                                                       |
 | `onClick`       | `(e: React.MouseEvent) => void`| —          | —            | Обработчик клика по контейнеру.                                                             |
@@ -154,7 +154,7 @@ const Messages = () => {
 **Ref API (`VoiceMessagePlayerRef`):**
 
 - `play()` — программный запуск воспроизведения.
-- `prefetch()` — загрузка аудио без воспроизведения (fetch + decode waveform).
+- `prefetch()` — подготовка аудио без воспроизведения (waveform считается фоном и play не задерживает).
 
 #### `VoicePlaybackChain`
 

package/dist/constants.d.ts

@@ -4,6 +4,8 @@
  * @author: exode <hello@exode.ru>
  */
 export declare const AUDIO_LEVEL_BARS = 40;
+/** Waveform decoding resamples to this rate — only the amplitude envelope matters */
+export declare const WAVEFORM_SAMPLE_RATE = 44100;
 export declare const createInitialLevels: () => number[];
 export declare const TIMELINE_SAMPLE_INTERVAL = 150;
 export declare const TIMELINE_BAR_WIDTH = 3;

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,eAAO,MAAM,mBAAmB,QAAO,MAAM,EAAuD,CAAC;AAErG,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAC5C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,qFAAqF;AACrF,eAAO,MAAM,oBAAoB,QAAQ,CAAC;AAE1C,eAAO,MAAM,mBAAmB,QAAO,MAAM,EAAuD,CAAC;AAErG,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAC5C,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAClC,eAAO,MAAM,uBAAuB,IAAI,CAAC;AACzC,eAAO,MAAM,uBAAuB,KAAK,CAAC"}

package/dist/hooks/useAudioBlobLoader.d.ts

@@ -11,16 +11,12 @@ interface UseAudioBlobLoaderOptions {
     preloadedBlob?: Blob | null;
     playbackCallbacks: PlaybackCallbacks;
 }
-interface EnsureAudioLoadedOptions {
-    /** Retry a src that already failed — only on explicit user intent, not on auto-prefetch */
-    retryFailed?: boolean;
-}
 interface UseAudioBlobLoaderResult {
     audioRef: React.MutableRefObject<HTMLAudioElement | null>;
     isLoading: boolean;
     isLoaded: boolean;
     waveformLevels: number[];
-    ensureAudioLoaded: (options?: EnsureAudioLoadedOptions) => Promise<void>;
+    ensureAudioLoaded: () => Promise<void>;
 }
 declare const useAudioBlobLoader: (options: UseAudioBlobLoaderOptions) => UseAudioBlobLoaderResult;
 export { useAudioBlobLoader };

package/dist/hooks/useAudioBlobLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,2FAA2F;IAC3F,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,CAAC,OAAO,CAAC,EAAE,wBAAwB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5E;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBA4KhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"useAudioBlobLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useAudioBlobLoader.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAOH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAYrD,UAAU,yBAAyB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,iBAAiB,EAAE,iBAAiB,CAAC;CACxC;AAED,UAAU,wBAAwB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1C;AAED,QAAA,MAAM,kBAAkB,GAAI,SAAS,yBAAyB,KAAG,wBAyLhE,CAAC;AAGF,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/index.cjs

@@ -30,6 +30,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
  *
@@ -135,6 +185,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);
     };
@@ -163,6 +219,7 @@ const createAudioPlayback = (url, callbacks) => {
 };
 const cleanupAudio = (audio) => {
     audio.pause();
+    audio.remove();
     audio.src = '';
     audio.onended = null;
     audio.ontimeupdate = null;
@@ -178,19 +235,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
  *
@@ -290,32 +334,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;
 };
 
 /**
@@ -963,18 +1007,12 @@ const useAudioBlobLoader = (options) => {
     const audioRef = React.useRef(null);
     const objectUrlRef = React.useRef(null);
     const abortControllerRef = React.useRef(null);
-    const failedSrcRef = React.useRef(null);
     const waveformTokenRef = React.useRef(0);
     const waveformDataRef = React.useRef(waveformData);
     const callbacksRef = React.useRef(playbackCallbacks);
     waveformDataRef.current = waveformData;
     callbacksRef.current = playbackCallbacks;
-    const createAudioFromBlob = React.useCallback((blob) => {
-        if (objectUrlRef.current) {
-            revokeObjectURL(objectUrlRef.current);
-        }
-        const url = createObjectURL(blob);
-        objectUrlRef.current = url;
+    const createAudioFromUrl = React.useCallback((url) => {
         const { audio } = createAudioPlayback(url, {
             onLoadedMetadata: (dur) => callbacksRef.current.onLoadedMetadata(dur),
             onTimeUpdate: (time) => callbacksRef.current.onTimeUpdate(time),
@@ -990,13 +1028,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 = React.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 = React.useCallback(async (blob) => {
-        if (waveformData) {
+    const applyWaveformLevels = React.useCallback(async (blob, seed) => {
+        /** Read through the ref: levels may arrive while the bytes are still loading */
+        if (waveformDataRef.current) {
             return;
         }
         waveformTokenRef.current += 1;
@@ -1009,8 +1056,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 = React.useCallback(async (blob) => {
         if (audioRef.current) {
             return;
@@ -1025,53 +1076,51 @@ const useAudioBlobLoader = (options) => {
         finally {
             setIsLoading(false);
         }
-        void applyWaveformLevels(blob);
+        void applyWaveformLevels(blob, `${blob.size}`);
     }, [applyWaveformLevels, createAudioFromBlob]);
-    const ensureAudioLoaded = React.useCallback(async (options) => {
+    /** Waveform bytes are cosmetic, so nothing here may delay playback */
+    const loadWaveformSource = React.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 = React.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 */
     React.useEffect(() => {
-        failedSrcRef.current = null;
         /** Drop the previous waveform so a failed decode cannot leave a foreign one */
         setWaveformLevels(waveformDataRef.current || createInitialLevels());
         return () => {
@@ -1089,11 +1138,12 @@ const useAudioBlobLoader = (options) => {
             setIsLoaded(false);
         };
     }, [src]);
+    /** A cached recording mounts on its own only while it has no url yet */
     React.useEffect(() => {
-        if (preloadedBlob && !audioRef.current) {
+        if (preloadedBlob && !src && !audioRef.current) {
             void mountFromBlob(preloadedBlob);
         }
-    }, [preloadedBlob, mountFromBlob]);
+    }, [src, preloadedBlob, mountFromBlob]);
     React.useEffect(() => {
         if (waveformData) {
             waveformTokenRef.current += 1;
@@ -1202,7 +1252,7 @@ const useVoiceMessagePlayer = (options) => {
             return;
         }
         audioPlaybackManager.stopOthers(stopThis);
-        void ensureAudioLoaded({ retryFailed: true }).then(() => {
+        void ensureAudioLoaded().then(() => {
             const audio = audioRef.current;
             if (audio) {
                 audio.play()
@@ -1262,7 +1312,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);