wavesurfer.js 7.12.7 → 7.12.8

package/README.md

@@ -6,7 +6,9 @@
 
 <img width="626" alt="waveform screenshot" src="https://github.com/katspaugh/wavesurfer.js/assets/381895/05f03bed-800e-4fa1-b09a-82a39a1c62ce">
 
-**Gold sponsor 💖** [Closed Caption Creator](https://www.closedcaptioncreator.com)
+---
+### Gold Sponsor 💖 [Closed Caption Creator](https://www.closedcaptioncreator.com) – Professional Subtitle Editor
+---
 
 # Table of contents
 
@@ -35,7 +37,7 @@ Alternatively, insert a UMD script tag which exports the library as a global `Wa
 <script src="https://unpkg.com/wavesurfer.js@7"></script>
 ```
 
-Create a wavesurfer instance and pass various [options](http://wavesurfer.xyz/docs/options):
+Create a wavesurfer instance and pass various [options](https://wavesurfer.xyz/docs/api/options):
 ```js
 const wavesurfer = WaveSurfer.create({
   container: '#waveform',
@@ -59,13 +61,17 @@ TypeScript types are included in the package, so there's no need to install `@ty
 
 See more [examples](https://wavesurfer.xyz/examples).
 
+## Documentation
+
+See the [wavesurfer.js guide](https://wavesurfer.xyz/docs/) on our website for beginner-friendly, practical documentation covering common use cases, plugins, framework integration, and troubleshooting.
+
 ## API reference
 
-See the wavesurfer.js documentation on our website:
+The full generated API reference lives at [wavesurfer.xyz/docs/api](https://wavesurfer.xyz/docs/api/):
 
- * [methods](https://wavesurfer.xyz/docs/methods)
- * [options](http://wavesurfer.xyz/docs/options)
- * [events](http://wavesurfer.xyz/docs/events)
+ * [methods](https://wavesurfer.xyz/docs/api/methods)
+ * [options](https://wavesurfer.xyz/docs/api/options)
+ * [events](https://wavesurfer.xyz/docs/api/events)
 
 ## Plugins
 

package/dist/__tests__/dom.test.js

@@ -1,4 +1,20 @@
-import createElement from '../dom.js';
+import createElement, { isHTMLElement } from '../dom.js';
+describe('isHTMLElement', () => {
+    test('accepts elements from the current realm', () => {
+        expect(isHTMLElement(document.createElement('div'))).toBe(true);
+    });
+    test('accepts element-like objects from another realm (e.g. an iframe)', () => {
+        const foreign = { nodeType: 1, style: {} };
+        expect(isHTMLElement(foreign)).toBe(true);
+    });
+    test('rejects non-elements', () => {
+        expect(isHTMLElement(null)).toBe(false);
+        expect(isHTMLElement(undefined)).toBe(false);
+        expect(isHTMLElement('#container')).toBe(false);
+        expect(isHTMLElement({})).toBe(false);
+        expect(isHTMLElement(document.createTextNode('text'))).toBe(false);
+    });
+});
 describe('createElement', () => {
     test('creates DOM structure', () => {
         var _a;

package/dist/__tests__/drag-stream.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/drag-stream.test.js

@@ -0,0 +1,108 @@
+import { createDragStream } from '../reactive/drag-stream.js';
+import { effect } from '../reactive/store.js';
+describe('createDragStream', () => {
+    beforeAll(() => {
+        Object.defineProperty(window, 'matchMedia', {
+            writable: true,
+            value: jest.fn().mockReturnValue({
+                matches: false,
+                addListener: jest.fn(),
+                removeListener: jest.fn(),
+            }),
+        });
+        if (typeof window.PointerEvent === 'undefined') {
+            class FakePointerEvent extends MouseEvent {
+                constructor(type, props) {
+                    super(type, props);
+                }
+            }
+            // @ts-expect-error
+            window.PointerEvent = FakePointerEvent;
+            // @ts-expect-error
+            global.PointerEvent = FakePointerEvent;
+        }
+    });
+    const pointerEvent = (type, props) => {
+        var _a;
+        const e = new PointerEvent(type, props);
+        Object.defineProperty(e, 'pointerId', { value: (_a = props.pointerId) !== null && _a !== void 0 ? _a : 0, configurable: true });
+        return e;
+    };
+    const setup = () => {
+        const el = document.createElement('div');
+        document.body.appendChild(el);
+        jest.spyOn(el, 'getBoundingClientRect').mockReturnValue({
+            left: 0,
+            top: 0,
+            width: 100,
+            height: 100,
+            right: 100,
+            bottom: 100,
+            x: 0,
+            y: 0,
+            toJSON: () => { },
+        });
+        const stream = createDragStream(el, { threshold: 0 });
+        const events = [];
+        const unsubscribe = effect(() => {
+            const drag = stream.signal.value;
+            if (drag)
+                events.push(drag);
+        }, [stream.signal]);
+        return {
+            el,
+            events,
+            cleanup: () => {
+                unsubscribe();
+                stream.cleanup();
+                el.remove();
+            },
+        };
+    };
+    test('emits start, move and end on a simple drag', () => {
+        const { el, events, cleanup } = setup();
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 1 }));
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 20, clientY: 20, pointerId: 1 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 20, clientY: 20, pointerId: 1 }));
+        expect(events.map((e) => e.type)).toEqual(['start', 'move', 'end']);
+        cleanup();
+    });
+    test('drag still works after a two-finger touch', () => {
+        const { el, events, cleanup } = setup();
+        // Two-finger tap: the second finger lifts before the first
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 1 }));
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 50, clientY: 10, pointerId: 2 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 50, clientY: 10, pointerId: 2 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 10, clientY: 10, pointerId: 1 }));
+        // A subsequent single-finger drag should work
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 3 }));
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 30, clientY: 10, pointerId: 3 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 30, clientY: 10, pointerId: 3 }));
+        expect(events.map((e) => e.type)).toEqual(['start', 'move', 'end']);
+        cleanup();
+    });
+    test('a second finger lifting does not end the first pointer drag', () => {
+        const { el, events, cleanup } = setup();
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 1 }));
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 20, clientY: 10, pointerId: 1 }));
+        // A second finger touches and lifts mid-drag
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 50, clientY: 10, pointerId: 2 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 50, clientY: 10, pointerId: 2 }));
+        // The first finger continues dragging and lifts
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 30, clientY: 10, pointerId: 1 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 30, clientY: 10, pointerId: 1 }));
+        expect(events.map((e) => e.type)).toEqual(['start', 'move', 'move', 'end']);
+        cleanup();
+    });
+    test('only the dragging pointer moves the drag', () => {
+        const { el, events, cleanup } = setup();
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 1 }));
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 20, clientY: 10, pointerId: 1 }));
+        // Moves from an untracked pointer are ignored
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 90, clientY: 90, pointerId: 7 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 30, clientY: 10, pointerId: 1 }));
+        expect(events.map((e) => e.type)).toEqual(['start', 'move', 'end']);
+        expect(events[1].x).toBe(20);
+        cleanup();
+    });
+});

package/dist/__tests__/draggable.test.js

@@ -21,6 +21,40 @@ describe('makeDraggable', () => {
             global.PointerEvent = FakePointerEvent;
         }
     });
+    test('drag still works after a two-finger touch', () => {
+        const el = document.createElement('div');
+        document.body.appendChild(el);
+        jest.spyOn(el, 'getBoundingClientRect').mockReturnValue({
+            left: 0,
+            top: 0,
+            width: 100,
+            height: 100,
+            right: 100,
+            bottom: 100,
+            x: 0,
+            y: 0,
+            toJSON: () => { },
+        });
+        const pointerEvent = (type, props) => {
+            const e = new PointerEvent(type, props);
+            Object.defineProperty(e, 'pointerId', { value: props.pointerId, configurable: true });
+            return e;
+        };
+        const onDrag = jest.fn();
+        const unsubscribe = makeDraggable(el, onDrag, undefined, undefined, 0);
+        // Two-finger tap: the second finger lifts before the first
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 1 }));
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 50, clientY: 10, pointerId: 2 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 50, clientY: 10, pointerId: 2 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 10, clientY: 10, pointerId: 1 }));
+        // A subsequent single-finger drag should work
+        el.dispatchEvent(pointerEvent('pointerdown', { clientX: 10, clientY: 10, pointerId: 3 }));
+        document.dispatchEvent(pointerEvent('pointermove', { clientX: 30, clientY: 10, pointerId: 3 }));
+        document.dispatchEvent(pointerEvent('pointerup', { clientX: 30, clientY: 10, pointerId: 3 }));
+        expect(onDrag).toHaveBeenCalled();
+        unsubscribe();
+        el.remove();
+    });
     test('invokes callbacks on drag', () => {
         const el = document.createElement('div');
         document.body.appendChild(el);

package/dist/__tests__/hover.test.js

@@ -12,6 +12,18 @@ const createEmitter = () => {
         }),
     };
 };
+const createWaveSurfer = (container, durationValue) => {
+    const duration = signal(durationValue);
+    Object.defineProperty(container, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({ left: 0, width: 100 }),
+    });
+    document.body.appendChild(container);
+    return {
+        duration,
+        wavesurfer: Object.assign(Object.assign({}, createEmitter()), { options: { progressColor: '#555' }, getDuration: jest.fn(() => duration.value), getState: jest.fn(() => ({ duration })), getWrapper: jest.fn(() => container) }),
+    };
+};
 describe('HoverPlugin', () => {
     afterEach(() => {
         document.body.innerHTML = '';
@@ -19,18 +31,34 @@ describe('HoverPlugin', () => {
     });
     test('passes the current wavesurfer duration to formatTimeCallback', () => {
         var _a;
-        const duration = signal(0);
         const container = document.createElement('div');
         const formatTimeCallback = jest.fn((seconds) => `${seconds}`);
-        Object.defineProperty(container, 'getBoundingClientRect', {
-            configurable: true,
-            value: () => ({ left: 0, width: 100 }),
-        });
-        document.body.appendChild(container);
+        const { wavesurfer } = createWaveSurfer(container, 0);
         const plugin = HoverPlugin.create({ formatTimeCallback });
-        plugin._init(Object.assign(Object.assign({}, createEmitter()), { options: { progressColor: '#555' }, getDuration: jest.fn(() => 12), getState: jest.fn(() => ({ duration })), getWrapper: jest.fn(() => container) }));
+        plugin._init(wavesurfer);
+        wavesurfer.getDuration.mockReturnValue(12);
         container.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 50 }));
         expect(formatTimeCallback).toHaveBeenCalledWith(6);
         expect((_a = container.querySelector('[part="hover-label"]')) === null || _a === void 0 ? void 0 : _a.textContent).toBe('6');
     });
+    test('keeps the hover line hidden after pointerleave when duration updates', () => {
+        const container = document.createElement('div');
+        const formatTimeCallback = jest.fn((seconds) => `${seconds}`);
+        const { duration, wavesurfer } = createWaveSurfer(container, 10);
+        const plugin = HoverPlugin.create({ formatTimeCallback });
+        plugin._init(wavesurfer);
+        container.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 50 }));
+        const hover = container.querySelector('[part="hover"]');
+        expect(hover === null || hover === void 0 ? void 0 : hover.style.opacity).toBe('1');
+        expect(formatTimeCallback).toHaveBeenCalledTimes(1);
+        container.dispatchEvent(new MouseEvent('pointerleave', { bubbles: true }));
+        expect(hover === null || hover === void 0 ? void 0 : hover.style.opacity).toBe('0');
+        // transform is cleared after the opacity transition ends, not immediately
+        hover === null || hover === void 0 ? void 0 : hover.dispatchEvent(new Event('transitionend'));
+        expect(hover === null || hover === void 0 ? void 0 : hover.style.transform).toBe('');
+        duration.set(12);
+        expect(hover === null || hover === void 0 ? void 0 : hover.style.opacity).toBe('0');
+        expect(hover === null || hover === void 0 ? void 0 : hover.style.transform).toBe('');
+        expect(formatTimeCallback).toHaveBeenCalledTimes(1);
+    });
 });

package/dist/__tests__/regions.test.js

@@ -17,6 +17,12 @@ const createWaveSurfer = (duration = 10, width = 100, scroll = 0) => {
     document.body.appendChild(wrapper);
     return Object.assign(Object.assign({}, emitter), { getDecodedData: jest.fn(() => ({ numberOfChannels: 1 })), getDuration: jest.fn(() => duration), getScroll: jest.fn(() => scroll), getWidth: jest.fn(() => width), getWrapper: jest.fn(() => wrapper) });
 };
+const mockRect = (element, rect) => {
+    Object.defineProperty(element, 'getBoundingClientRect', {
+        configurable: true,
+        value: jest.fn(() => (Object.assign(Object.assign({}, rect), { right: rect.left + rect.width, bottom: rect.top + rect.height, x: rect.left, y: rect.top, toJSON: () => rect }))),
+    });
+};
 describe('RegionsPlugin', () => {
     beforeEach(() => {
         jest.useFakeTimers();
@@ -58,4 +64,37 @@ describe('RegionsPlugin', () => {
         region.setOptions({ start: 8, end: 9 });
         expect((_e = region.element) === null || _e === void 0 ? void 0 : _e.parentElement).toBeNull();
     });
+    test('places a region in the first free row instead of summing all prior overlaps', () => {
+        var _a, _b, _c;
+        const wavesurfer = createWaveSurfer();
+        const plugin = RegionsPlugin.create();
+        plugin._init(wavesurfer);
+        const firstRegion = plugin.addRegion({ start: 0, end: 1, content: 'First' });
+        const secondRegion = plugin.addRegion({ start: 1, end: 2, content: 'Second' });
+        const thirdRegion = plugin.addRegion({ start: 2, end: 3, content: 'Third' });
+        mockRect(firstRegion.content, { left: 0, top: 0, width: 40, height: 10 });
+        mockRect(secondRegion.content, { left: 50, top: 0, width: 40, height: 10 });
+        mockRect(thirdRegion.content, { left: 30, top: 0, width: 40, height: 10 });
+        jest.runOnlyPendingTimers();
+        expect((_a = firstRegion.content) === null || _a === void 0 ? void 0 : _a.style.marginTop).toBe('0px');
+        expect((_b = secondRegion.content) === null || _b === void 0 ? void 0 : _b.style.marginTop).toBe('0px');
+        expect((_c = thirdRegion.content) === null || _c === void 0 ? void 0 : _c.style.marginTop).toBe('12px');
+    });
+    test('reflows shifted labels when another region moves away', () => {
+        var _a, _b, _c;
+        const wavesurfer = createWaveSurfer();
+        const plugin = RegionsPlugin.create();
+        plugin._init(wavesurfer);
+        const firstRegion = plugin.addRegion({ start: 0, end: 1, content: 'First' });
+        const secondRegion = plugin.addRegion({ start: 1, end: 2, content: 'Second' });
+        mockRect(firstRegion.content, { left: 0, top: 0, width: 40, height: 10 });
+        mockRect(secondRegion.content, { left: 20, top: 0, width: 40, height: 10 });
+        jest.runOnlyPendingTimers();
+        expect((_a = secondRegion.content) === null || _a === void 0 ? void 0 : _a.style.marginTop).toBe('12px');
+        mockRect(firstRegion.content, { left: 80, top: 0, width: 40, height: 10 });
+        firstRegion.onContentBlur();
+        jest.runOnlyPendingTimers();
+        expect((_b = firstRegion.content) === null || _b === void 0 ? void 0 : _b.style.marginTop).toBe('0px');
+        expect((_c = secondRegion.content) === null || _c === void 0 ? void 0 : _c.style.marginTop).toBe('0px');
+    });
 });

package/dist/__tests__/renderer.test.js

@@ -60,6 +60,10 @@ describe('Renderer', () => {
         container.remove();
         jest.clearAllMocks();
     });
+    test('parentFromOptionsContainer accepts an element from another realm (e.g. an iframe)', () => {
+        const foreign = { nodeType: 1, style: {} };
+        expect(renderer.parentFromOptionsContainer(foreign)).toBe(foreign);
+    });
     test('parentFromOptionsContainer returns element and throws', () => {
         expect(renderer.parentFromOptionsContainer(container)).toBe(container);
         expect(renderer.parentFromOptionsContainer('#root')).toBe(container);

package/dist/__tests__/wavesurfer.test.js

@@ -178,6 +178,19 @@ describe('WaveSurfer public methods', () => {
         expect(spy).toHaveBeenCalledWith(2);
         expect(ws.stopAtPosition).toBe(4);
     }));
+    test('pauses and clamps time to the exact stop position when playback overshoots it', () => __awaiter(void 0, void 0, void 0, function* () {
+        const ws = createWs();
+        const media = ws.getMediaElement();
+        Object.defineProperty(media, 'paused', { configurable: true, value: false });
+        yield ws.play(1, 2);
+        // Simulate the clock overshooting the stop position between timer ticks
+        media.currentTime = 2.013;
+        const timer = getTimer();
+        const tick = timer.on.mock.calls.find(([event]) => event === 'tick')[1];
+        tick();
+        expect(media.pause).toHaveBeenCalled();
+        expect(ws.getCurrentTime()).toBe(2);
+    }));
     test('playPause toggles play and pause', () => __awaiter(void 0, void 0, void 0, function* () {
         const ws = createWs();
         const media = ws.getMediaElement();

package/dist/__tests__/webaudio.test.js

@@ -179,6 +179,31 @@ describe('WebAudioPlayer', () => {
             triggerOnended();
             expect(endedSpy).toHaveBeenCalledTimes(1);
         });
+        test('stopAt schedules the stop scaled by playback rate', () => {
+            const { audioContext, bufferSource } = createMockAudioContext();
+            const player = new WebAudioPlayer(audioContext);
+            player.buffer = createMockBuffer(10);
+            player._playbackRate = 2;
+            audioContext.currentTime = 100;
+            player.play();
+            // At 2x rate, stopping at media time 5 takes only 2.5s of real time
+            player.stopAt(5);
+            expect(bufferSource.stop).toHaveBeenCalledWith(102.5);
+        });
+        test('stopAt reports exactly the stop position after the buffer ends', () => {
+            var _a;
+            const { audioContext, bufferSource } = createMockAudioContext();
+            const player = new WebAudioPlayer(audioContext);
+            player.buffer = createMockBuffer(10);
+            audioContext.currentTime = 100;
+            player.play();
+            player.stopAt(5);
+            // The 'ended' event fires with some latency after the actual stop
+            audioContext.currentTime = 105.03;
+            const endedListener = (_a = bufferSource.addEventListener.mock.calls.find(([type]) => type === 'ended')) === null || _a === void 0 ? void 0 : _a[1];
+            endedListener === null || endedListener === void 0 ? void 0 : endedListener();
+            expect(player.currentTime).toBe(5);
+        });
         test('does not emit ended when currentTime is beyond tolerance threshold from duration', () => {
             const { audioContext, triggerOnended } = createMockAudioContext();
             const player = new WebAudioPlayer(audioContext);

package/dist/dom.d.ts

@@ -10,4 +10,9 @@ export declare function createElement(tagName: string, content: TreeNode & {
     xmlns: string;
 }, container?: Node): SVGElement;
 export declare function createElement(tagName: string, content?: TreeNode, container?: Node): HTMLElement;
+/**
+ * Check if a value is an HTML element, including elements from other realms
+ * (e.g. an iframe), for which `instanceof HTMLElement` returns false
+ */
+export declare function isHTMLElement(value: unknown): value is HTMLElement;
 export default createElement;

package/dist/dom.js

@@ -33,4 +33,16 @@ export function createElement(tagName, content, container) {
     container === null || container === void 0 ? void 0 : container.appendChild(el);
     return el;
 }
+/**
+ * Check if a value is an HTML element, including elements from other realms
+ * (e.g. an iframe), for which `instanceof HTMLElement` returns false
+ */
+export function isHTMLElement(value) {
+    if (value instanceof HTMLElement)
+        return true;
+    return (typeof value === 'object' &&
+        value !== null &&
+        value.nodeType === Node.ELEMENT_NODE &&
+        typeof value.style === 'object');
+}
 export default createElement;

package/dist/draggable.js

@@ -11,15 +11,20 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
     const onPointerDown = (event) => {
         if (event.button !== mouseButton)
             return;
+        if (activePointers.has(event.pointerId))
+            return;
         activePointers.set(event.pointerId, event);
         if (activePointers.size > 1) {
             return;
         }
+        const dragPointerId = event.pointerId;
         let startX = event.clientX;
         let startY = event.clientY;
         let isDragging = false;
         const touchStartTime = Date.now();
         const onPointerMove = (event) => {
+            if (event.pointerId !== dragPointerId)
+                return;
             if (event.defaultPrevented || activePointers.size > 1) {
                 return;
             }
@@ -44,18 +49,23 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 3, mo
             }
         };
         const onPointerUp = (event) => {
-            activePointers.delete(event.pointerId);
-            if (isDragging) {
+            // Only react to pointers that started on the element
+            if (!activePointers.delete(event.pointerId))
+                return;
+            // Only the pointer that started the drag can end it
+            if (event.pointerId === dragPointerId && isDragging) {
                 const x = event.clientX;
                 const y = event.clientY;
                 const rect = element.getBoundingClientRect();
                 const { left, top } = rect;
                 onEnd === null || onEnd === void 0 ? void 0 : onEnd(x - left, y - top);
             }
-            unsubscribeDocument();
+            // Keep listening until all pointers are released
+            if (activePointers.size === 0) {
+                unsubscribeDocument();
+            }
         };
         const onPointerLeave = (e) => {
-            activePointers.delete(e.pointerId);
             if (!e.relatedTarget || e.relatedTarget === document.documentElement) {
                 onPointerUp(e);
             }

package/dist/fetcher.js

@@ -7,20 +7,25 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-function watchProgress(response, progressCallback) {
+function watchProgress(response, progressCallback, signal) {
     return __awaiter(this, void 0, void 0, function* () {
+        var _a;
         if (!response.body || !response.headers)
             return;
         const reader = response.body.getReader();
         const contentLength = Number(response.headers.get('Content-Length')) || 0;
         let receivedLength = 0;
-        // Process the data
-        const processChunk = (value) => {
-            // Add to the received length
-            receivedLength += (value === null || value === void 0 ? void 0 : value.length) || 0;
-            const percentage = Math.round((receivedLength / contentLength) * 100);
-            progressCallback(percentage);
+        // Abort the reader when the signal fires
+        const onAbort = () => {
+            reader.cancel();
         };
+        if (signal) {
+            if (signal.aborted) {
+                reader.cancel();
+                return;
+            }
+            signal.addEventListener('abort', onAbort, { once: true });
+        }
         // Use iteration instead of recursion to avoid stack issues
         try {
             while (true) {
@@ -28,24 +33,40 @@ function watchProgress(response, progressCallback) {
                 if (data.done) {
                     break;
                 }
-                processChunk(data.value);
+                receivedLength += ((_a = data.value) === null || _a === void 0 ? void 0 : _a.length) || 0;
+                // Only report progress if Content-Length is available and non-zero
+                if (contentLength > 0) {
+                    const percentage = Math.round((receivedLength / contentLength) * 100);
+                    progressCallback(percentage);
+                }
             }
         }
         catch (err) {
-            // Ignore errors because we can only handle the main response
+            // Ignore abort errors from reader cancellation
+            if (err instanceof DOMException && err.name === 'AbortError')
+                return;
+            // Ignore other errors because we can only handle the main response
             console.warn('Progress tracking error:', err);
         }
+        finally {
+            // Remove the abort listener to prevent leaks
+            if (signal) {
+                signal.removeEventListener('abort', onAbort);
+            }
+        }
     });
 }
 function fetchBlob(url, progressCallback, requestInit) {
     return __awaiter(this, void 0, void 0, function* () {
+        var _a;
         // Fetch the resource
         const response = yield fetch(url, requestInit);
         if (response.status >= 400) {
             throw new Error(`Failed to fetch ${url}: ${response.status} (${response.statusText})`);
         }
         // Read the data to track progress
-        watchProgress(response.clone(), progressCallback);
+        // Pass the abort signal so the progress reader can be cancelled
+        watchProgress(response.clone(), progressCallback, (_a = requestInit === null || requestInit === void 0 ? void 0 : requestInit.signal) !== null && _a !== void 0 ? _a : undefined);
         return response.blob();
     });
 }

package/dist/fft.js

@@ -535,7 +535,11 @@ function FFT(bufferSize, sampleRate, windowFunc, alpha) {
         limit = limit << 1;
         bit = bit >> 1;
     }
-    for (let i = 0; i < bufferSize; i++) {
+    // Precompute sin/cos tables for FFT twiddle factors
+    // Index 0 is a special case: -PI/0 would produce NaN, use 0 instead
+    this.sinTable[0] = 0;
+    this.cosTable[0] = 1;
+    for (let i = 1; i < bufferSize; i++) {
         this.sinTable[i] = Math.sin(-Math.PI / i);
         this.cosTable[i] = Math.cos(-Math.PI / i);
     }

package/dist/player.d.ts

@@ -9,6 +9,7 @@ type PlayerOptions = {
 declare class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
     protected media: HTMLMediaElement;
     private isExternalMedia;
+    private _ownBlobUrl;
     private _isPlaying;
     private _currentTime;
     private _duration;

package/dist/player.js

@@ -36,6 +36,7 @@ class Player extends EventEmitter {
     constructor(options) {
         super();
         this.isExternalMedia = false;
+        this._ownBlobUrl = null;
         this.reactiveMediaEventCleanups = [];
         if (options.media) {
             this.media = options.media;
@@ -121,9 +122,10 @@ class Player extends EventEmitter {
         return this.media.currentSrc || this.media.src || '';
     }
     revokeSrc() {
-        const src = this.getSrc();
-        if (src.startsWith('blob:')) {
-            URL.revokeObjectURL(src);
+        // Only revoke blob URLs that we created (not ones owned by external callers)
+        if (this._ownBlobUrl) {
+            URL.revokeObjectURL(this._ownBlobUrl);
+            this._ownBlobUrl = null;
         }
     }
     canPlayType(type) {
@@ -135,6 +137,10 @@ class Player extends EventEmitter {
             return; // no need to change the source
         this.revokeSrc();
         const newSrc = blob instanceof Blob && (this.canPlayType(blob.type) || !url) ? URL.createObjectURL(blob) : url;
+        // Track blob URLs we created so we can revoke them on destroy
+        if (newSrc !== url) {
+            this._ownBlobUrl = newSrc;
+        }
         // Reset the media element, otherwise it keeps the previous source
         if (prevSrc) {
             this.media.removeAttribute('src');
@@ -152,10 +158,13 @@ class Player extends EventEmitter {
         // Cleanup reactive media event listeners
         this.reactiveMediaEventCleanups.forEach((cleanup) => cleanup());
         this.reactiveMediaEventCleanups = [];
+        // Revoke blob URLs that we created
+        this.revokeSrc();
+        // Clear all event emitter listeners
+        this.unAll();
         if (this.isExternalMedia)
             return;
         this.media.pause();
-        this.revokeSrc();
         this.media.removeAttribute('src');
         // Load resets the media element to its initial state
         this.media.load();