Stop large audio playback when the media element ends (#34495)

apps/web/src/audio/Playback.ts

@@ -135,6 +135,7 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
         this.clock.destroy();
         this.waveformObservable.close();
         if (this.element) {
+            this.element.removeEventListener("ended", this.onPlaybackEnd);
             URL.revokeObjectURL(this.element.src);
             this.element.remove();
         }
@@ -236,12 +237,16 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
 
         if (this.element) {
             this.source = this.context.createMediaElementSource(this.element);
+            // A MediaElementAudioSourceNode is not a scheduled source node and never emits "ended",
+            // so the media element has to be listened to instead. Without this, playback of a large
+            // file never returns to Stopped and the clock keeps running past the end of the clip.
+            this.element.addEventListener("ended", this.onPlaybackEnd);
         } else {
             this.source = this.context.createBufferSource();
             this.source.buffer = this.audioBuf ?? null;
+            this.source.addEventListener("ended", this.onPlaybackEnd);
         }
 
-        this.source.addEventListener("ended", this.onPlaybackEnd);
         this.source.connect(this.context.destination);
     }
 

apps/web/test/unit-tests/audio/Playback-test.ts

@@ -29,11 +29,18 @@ describe("Playback", () => {
         connect: jest.fn(),
         start: jest.fn(),
     };
+    const mockMediaElementSourceNode = {
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        connect: jest.fn(),
+        disconnect: jest.fn(),
+    };
     const mockAudioContext = {
         decodeAudioData: jest.fn(),
         suspend: jest.fn(),
         resume: jest.fn(),
         createBufferSource: jest.fn().mockReturnValue(mockAudioBufferSourceNode),
+        createMediaElementSource: jest.fn().mockReturnValue(mockMediaElementSourceNode),
         currentTime: 1337,
     };
 
@@ -181,4 +188,82 @@ describe("Playback", () => {
             expect(mockAudioContext.decodeAudioData).toHaveBeenCalledTimes(1);
         });
     });
+
+    describe("audio larger than 5mb", () => {
+        // Anything over 5mb is played through an <audio /> element rather than a decoded buffer
+        const largeBuffer = (): ArrayBuffer => new ArrayBuffer(5 * 1024 * 1024 + 1);
+
+        let element: ReturnType<typeof mockAudioElement>;
+
+        /**
+         * A stand-in for the <audio /> element Playback creates. Assigning `src` resolves the load
+         * the same way the browser does, and listeners registered on it can be fired by hand.
+         */
+        const mockAudioElement = () => {
+            const listeners = new Map<string, Set<() => void | Promise<void>>>();
+            const el = {
+                duration: 42,
+                currentTime: 0,
+                onloadeddata: undefined as undefined | (() => void),
+                onerror: undefined as undefined | (() => void),
+                play: jest.fn().mockResolvedValue(undefined),
+                pause: jest.fn(),
+                remove: jest.fn(),
+                addEventListener: jest.fn((type: string, cb: () => void) => {
+                    if (!listeners.has(type)) listeners.set(type, new Set());
+                    listeners.get(type)!.add(cb);
+                }),
+                removeEventListener: jest.fn((type: string, cb: () => void) => {
+                    listeners.get(type)?.delete(cb);
+                }),
+                listenerCount: (type: string): number => listeners.get(type)?.size ?? 0,
+                fire: async (type: string): Promise<void> => {
+                    for (const cb of listeners.get(type) ?? []) await cb();
+                },
+            };
+            Object.defineProperty(el, "src", {
+                set() {
+                    el.onloadeddata?.();
+                },
+            });
+            return el;
+        };
+
+        beforeEach(() => {
+            element = mockAudioElement();
+            jest.spyOn(document, "createElement").mockReturnValue(element as unknown as HTMLElement);
+            global.URL.createObjectURL = jest.fn().mockReturnValue("blob:audio");
+            global.URL.revokeObjectURL = jest.fn();
+            mockAudioContext.createMediaElementSource.mockClear().mockReturnValue(mockMediaElementSourceNode);
+            mockMediaElementSourceNode.connect.mockClear();
+        });
+
+        afterEach(() => {
+            mocked(document.createElement).mockRestore();
+        });
+
+        it("stops when the media element ends", async () => {
+            const playback = new Playback(largeBuffer());
+            await playback.prepare();
+            await playback.play();
+            expect(playback.currentState).toEqual(PlaybackState.Playing);
+
+            await element.fire("ended");
+
+            expect(mockAudioContext.suspend).toHaveBeenCalled();
+            expect(playback.currentState).toEqual(PlaybackState.Stopped);
+            expect(playback.timeSeconds).toEqual(0);
+        });
+
+        it("stops listening to the media element once destroyed", async () => {
+            const playback = new Playback(largeBuffer());
+            await playback.prepare();
+            await playback.play();
+            expect(element.listenerCount("ended")).toEqual(1);
+
+            playback.destroy();
+
+            expect(element.listenerCount("ended")).toEqual(0);
+        });
+    });
 });