@readium/navigator 2.4.0-beta.6 → 2.4.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.4.0-beta.6",
+  "version": "2.4.0-beta.7",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",

package/src/audio/AudioNavigator.ts

@@ -59,6 +59,7 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
     private readonly pub: Publication;
     private positionPollInterval: ReturnType<typeof setInterval> | null = null;
     private navigationId: number = 0;
+    private _playIntent: boolean = false;
     private listeners: AudioNavigatorListeners;
     private currentLocation!: Locator;
 
@@ -432,7 +433,11 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
 
             const id = ++this.navigationId;
             const direction: "forward" | "backward" = trackIndex >= this.currentTrackIndex() ? "forward" : "backward";
-            const wasPlaying = this.isPlaying;
+            // Use _playIntent rather than isPlaying — setMediaElement resets the
+            // engine's playing flag, so a rapid second go() would see false and
+            // never resume playback.
+            const wasPlaying = this.isPlaying || this._playIntent;
+            this._playIntent = wasPlaying;
 
             this.stopPositionPolling();
             this.pool.setCurrentAudio(trackIndex, direction);
@@ -450,6 +455,7 @@ export class AudioNavigator extends MediaNavigator implements Configurable<Audio
             }
 
             if (wasPlaying) this.play();
+            this._playIntent = false;
 
             cb(true);
         } catch (error) {

package/src/audio/AudioPoolManager.ts

@@ -59,6 +59,11 @@ export class AudioPoolManager {
         if (!element) {
             element = document.createElement("audio");
             element.preload = "auto";
+            // When Web Audio is active CORS already succeeded, so preload
+            // with crossOrigin to avoid a destructive reload at swap time.
+            if (this._audioEngine.isWebAudioActive) {
+                element.crossOrigin = "anonymous";
+            }
             element.src = href;
             element.load();
             this.pool.set(href, element);
@@ -105,16 +110,7 @@ export class AudioPoolManager {
         const href = this.pickPlayableHref(this._publication.readingOrder.items[currentIndex]);
         const element = this.ensure(href);
 
-        // Hand the element to the engine. When Web Audio is active, the pooled
-        // element doesn't have crossOrigin set (it would break non-CORS servers
-        // during preload), so we swap in the fresh element and let loadAudio
-        // handle CORS setup + fallback on the engine's own mediaElement.
-        if (this.audioEngine.isWebAudioActive) {
-            this.audioEngine.setMediaElement(element);
-            this.audioEngine.loadAudio(href);
-        } else {
-            this.audioEngine.setMediaElement(element);
-        }
+        this.audioEngine.setMediaElement(element);
 
         // Remove from pool so the engine fully owns it and we don't dispose it
         this.pool.delete(href);

package/src/audio/engine/AudioEngine.ts

@@ -40,12 +40,6 @@ export interface AudioEngine {
      */
     playback: Playback;
 
-    /**
-     * Loads the audio resource at the given URL.
-     * @param url The URL of the audio resource.
-     */
-    loadAudio(url: string): void;
-    
     /**
      * Adds an event listener to the audio engine.
      * @param event The event name to listen.

package/src/audio/engine/WebAudioEngine.ts

@@ -95,52 +95,6 @@ export class WebAudioEngine implements AudioEngine {
     );
   }
 
-  /**
-   * Load the audio resource at the given URL.
-   * @param url The URL of the audio resource.
-   * */
-  public loadAudio(url: string): void {
-    // Abort any in-progress load before starting a new one.
-    this.mediaElement.pause();
-    this.mediaElement.removeAttribute("src");
-    this.mediaElement.load();
-
-    this.isLoadingValue = true;
-    this.isLoadedValue = false;
-    this.isPlayingValue = false;
-    this.isPausedValue = false;
-
-    if (this.webAudioActive) {
-      this.mediaElement.crossOrigin = "anonymous";
-      this.mediaElement.src = url;
-      this.mediaElement.load();
-      this.mediaElement.playbackRate = this.currentPlaybackRate;
-
-      // If the server doesn't honour the CORS preflight, fall back to a
-      // non-CORS load and tear down the Web Audio graph so the element
-      // is never passed to MediaElementAudioSourceNode in a tainted state.
-      const cleanup = () => {
-        this.mediaElement.removeEventListener("error", onCORSError);
-        this.mediaElement.removeEventListener("canplaythrough", onCORSSuccess);
-      };
-      const onCORSError = () => {
-        cleanup();
-        this.deactivateWebAudio();
-        this.mediaElement.removeAttribute("crossOrigin");
-        this.mediaElement.src = url;
-        this.mediaElement.load();
-        this.mediaElement.playbackRate = this.currentPlaybackRate;
-      };
-      const onCORSSuccess = () => cleanup();
-      this.mediaElement.addEventListener("error", onCORSError);
-      this.mediaElement.addEventListener("canplaythrough", onCORSSuccess);
-    } else {
-      this.mediaElement.src = url;
-      this.mediaElement.load();
-      this.mediaElement.playbackRate = this.currentPlaybackRate;
-    }
-  }
-
   private deactivateWebAudio(): void {
     if (this.worklet) {
       this.worklet.destroy();
@@ -162,18 +116,7 @@ export class WebAudioEngine implements AudioEngine {
    * @param element The HTML audio element to use.
    */
   public setMediaElement(element: HTMLAudioElement): void {
-    // Pause the outgoing element before replacing it
-    this.mediaElement.pause();
-    this.isPlayingValue = false;
-    this.isPausedValue = false;
-
-    // Disconnect old source node if it exists
-    if (this.sourceNode) {
-      this.sourceNode.disconnect();
-      this.sourceNode = null;
-    }
-
-    // Remove old event listeners from current mediaElement
+    // Remove listeners BEFORE pausing so the pause doesn't leak through
     this.mediaElement.removeEventListener("canplaythrough", this.boundOnCanPlayThrough);
     this.mediaElement.removeEventListener("timeupdate", this.boundOnTimeUpdate);
     this.mediaElement.removeEventListener("error", this.boundOnError);
@@ -190,6 +133,17 @@ export class WebAudioEngine implements AudioEngine {
     this.mediaElement.removeEventListener("pause", this.boundOnPause);
     this.mediaElement.removeEventListener("progress", this.boundOnProgress);
 
+    // Now safe to pause the outgoing element
+    this.mediaElement.pause();
+    this.isPlayingValue = false;
+    this.isPausedValue = false;
+
+    // Disconnect old source node if it exists
+    if (this.sourceNode) {
+      this.sourceNode.disconnect();
+      this.sourceNode = null;
+    }
+
     // Set new media element
     this.mediaElement = element;
 
@@ -214,6 +168,26 @@ export class WebAudioEngine implements AudioEngine {
     this.mediaElement.volume = this.isMutedValue ? 0 : this.currentVolume;
     this.mediaElement.playbackRate = this.currentPlaybackRate;
 
+    // Reconnect the Web Audio graph to the new element
+    if (this.webAudioActive) {
+      try {
+        const ctx = this.getOrCreateAudioContext();
+        this.sourceNode = new MediaElementAudioSourceNode(ctx, { mediaElement: this.mediaElement });
+        if (!this.gainNode) {
+          this.gainNode = ctx.createGain();
+          this.gainNode.connect(ctx.destination);
+        }
+        if (this.worklet?.workletNode) {
+          this.sourceNode.connect(this.worklet.workletNode);
+        } else {
+          this.sourceNode.connect(this.gainNode);
+        }
+      } catch {
+        // CORS failed on this element — deactivate Web Audio gracefully
+        this.deactivateWebAudio();
+      }
+    }
+
     // Check if metadata is already loaded (common with preloaded elements)
     if (this.mediaElement.readyState >= 1) {
       this.onLoadedMetadata(new Event('loadedmetadata'));

package/types/src/audio/AudioNavigator.d.ts

@@ -28,6 +28,7 @@ export declare class AudioNavigator extends MediaNavigator implements Configurab
     private readonly pub;
     private positionPollInterval;
     private navigationId;
+    private _playIntent;
     private listeners;
     private currentLocation;
     private _preferences;

package/types/src/audio/engine/AudioEngine.d.ts

@@ -36,11 +36,6 @@ export interface AudioEngine {
      * The current playback state.
      */
     playback: Playback;
-    /**
-     * Loads the audio resource at the given URL.
-     * @param url The URL of the audio resource.
-     */
-    loadAudio(url: string): void;
     /**
      * Adds an event listener to the audio engine.
      * @param event The event name to listen.

package/types/src/audio/engine/WebAudioEngine.d.ts

@@ -48,11 +48,6 @@ export declare class WebAudioEngine implements AudioEngine {
      * @param callback - callback function to be removed.
      */
     off(event: string, callback: EventCallback): void;
-    /**
-     * Load the audio resource at the given URL.
-     * @param url The URL of the audio resource.
-     * */
-    loadAudio(url: string): void;
     private deactivateWebAudio;
     /**
      * Sets the media element for playback.