@prose-reader/enhancer-audio 1.285.0

package/dist/index.umd.cjs

@@ -0,0 +1,917 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@prose-reader/core'), require('rxjs')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@prose-reader/core', 'rxjs'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["prose-reader-enhancer-audio"] = {}, global.core, global.rxjs));
+})(this, (function (exports, core, rxjs) { 'use strict';
+
+  const AUDIO_VISUALIZER_LEVEL_COUNT = 80;
+  const AUDIO_VISUALIZER_NOISE_FLOOR = 0.035;
+  const getIdleVisualizerLevels = () => Array.from({ length: AUDIO_VISUALIZER_LEVEL_COUNT }, () => 0);
+  const getVisualizerLevels = (data) => {
+    if (data.length === 0) return getIdleVisualizerLevels();
+    const bucketSize = Math.max(
+      1,
+      Math.floor(data.length / AUDIO_VISUALIZER_LEVEL_COUNT)
+    );
+    return Array.from({ length: AUDIO_VISUALIZER_LEVEL_COUNT }, (_, index) => {
+      const start = index * bucketSize;
+      const end = Math.min(data.length, start + bucketSize);
+      if (start >= data.length || start === end) return 0;
+      let total = 0;
+      for (let cursor = start; cursor < end; cursor += 1) {
+        total += data[cursor] ?? 0;
+      }
+      const average = total / (end - start);
+      const normalizedAverage = average / 255;
+      const gatedAverage = (normalizedAverage - AUDIO_VISUALIZER_NOISE_FLOOR) / (1 - AUDIO_VISUALIZER_NOISE_FLOOR);
+      return Math.max(0, Math.min(1, gatedAverage));
+    });
+  };
+
+  const AUDIO_VISUALIZER_FFT_SIZE = 256;
+  class VisualizerAudioGraph {
+    constructor(audioElement) {
+      this.audioElement = audioElement;
+    }
+    audioContext;
+    audioSourceNode;
+    analyserNode;
+    frequencyData;
+    async resumeIfNeeded() {
+      if (!this.ensure()) {
+        return false;
+      }
+      const audioContext = this.audioContext;
+      if (!audioContext) {
+        return false;
+      }
+      if (audioContext.state !== `suspended`) {
+        return true;
+      }
+      try {
+        await audioContext.resume();
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    readLevels() {
+      if (!this.analyserNode || !this.frequencyData) {
+        return getIdleVisualizerLevels();
+      }
+      this.analyserNode.getByteFrequencyData(this.frequencyData);
+      return getVisualizerLevels(this.frequencyData);
+    }
+    destroy() {
+      this.audioSourceNode?.disconnect();
+      this.analyserNode?.disconnect();
+      this.audioContext?.close().catch(() => void 0);
+      this.audioContext = void 0;
+      this.audioSourceNode = void 0;
+      this.analyserNode = void 0;
+      this.frequencyData = void 0;
+    }
+    ensure() {
+      if (this.audioContext && this.analyserNode && this.frequencyData) {
+        return true;
+      }
+      if (typeof window === `undefined` || !window.AudioContext) {
+        return false;
+      }
+      const audioContext = new window.AudioContext();
+      const audioSourceNode = audioContext.createMediaElementSource(
+        this.audioElement
+      );
+      const analyserNode = audioContext.createAnalyser();
+      analyserNode.fftSize = AUDIO_VISUALIZER_FFT_SIZE;
+      analyserNode.smoothingTimeConstant = 0.8;
+      audioSourceNode.connect(analyserNode);
+      analyserNode.connect(audioContext.destination);
+      this.audioContext = audioContext;
+      this.audioSourceNode = audioSourceNode;
+      this.analyserNode = analyserNode;
+      this.frequencyData = new Uint8Array(analyserNode.frequencyBinCount);
+      return true;
+    }
+  }
+
+  class AudioVisualizer extends core.ReactiveEntity {
+    audioGraph;
+    playbackState$ = new rxjs.BehaviorSubject({
+      trackId: void 0,
+      isRunning: false,
+      resetLevels: false
+    });
+    subscriptions = new rxjs.Subscription();
+    constructor(audioElement) {
+      super({
+        levels: getIdleVisualizerLevels(),
+        isActive: false,
+        trackId: void 0
+      });
+      this.audioGraph = new VisualizerAudioGraph(audioElement);
+      this.subscriptions.add(
+        this.playbackState$.pipe(
+          rxjs.distinctUntilChanged(
+            (previous, next) => previous.trackId === next.trackId && previous.isRunning === next.isRunning && previous.resetLevels === next.resetLevels
+          ),
+          rxjs.switchMap(({ trackId, isRunning, resetLevels }) => {
+            if (!trackId || !isRunning) {
+              return rxjs.of({
+                trackId,
+                isActive: false,
+                ...resetLevels ? { levels: getIdleVisualizerLevels() } : void 0
+              });
+            }
+            const shouldResetLevels = this.value.trackId !== trackId;
+            return rxjs.concat(
+              rxjs.of({
+                trackId,
+                isActive: true,
+                ...shouldResetLevels ? { levels: getIdleVisualizerLevels() } : void 0
+              }),
+              this.createLevels$().pipe(
+                rxjs.map((levels) => ({
+                  trackId,
+                  levels,
+                  isActive: true
+                })),
+                rxjs.defaultIfEmpty({
+                  trackId,
+                  isActive: false,
+                  levels: getIdleVisualizerLevels()
+                })
+              )
+            );
+          })
+        ).subscribe((value) => {
+          this.mergeCompare(value);
+        })
+      );
+    }
+    start(currentTrack) {
+      if (!currentTrack) return;
+      this.playbackState$.next({
+        trackId: currentTrack.id,
+        isRunning: true,
+        resetLevels: false
+      });
+    }
+    setTrack(trackId) {
+      this.playbackState$.next({
+        trackId,
+        isRunning: false,
+        resetLevels: false
+      });
+    }
+    reset(trackId) {
+      this.playbackState$.next({
+        trackId,
+        isRunning: false,
+        resetLevels: true
+      });
+    }
+    stop({ resetLevels = false } = {}) {
+      this.playbackState$.next({
+        trackId: this.playbackState$.value.trackId,
+        isRunning: false,
+        resetLevels
+      });
+    }
+    destroy() {
+      this.stop({
+        resetLevels: true
+      });
+      this.subscriptions.unsubscribe();
+      this.playbackState$.complete();
+      this.audioGraph.destroy();
+      super.destroy();
+    }
+    createLevels$() {
+      return rxjs.defer(() => {
+        return rxjs.from(this.audioGraph.resumeIfNeeded()).pipe(
+          rxjs.switchMap(
+            (isReady) => isReady ? rxjs.animationFrames().pipe(rxjs.map(() => this.audioGraph.readLevels())) : rxjs.EMPTY
+          )
+        );
+      });
+    }
+  }
+
+  class AudioElementAdapter {
+    element;
+    canPlay$;
+    ended$;
+    isPlaying$;
+    metrics$;
+    constructor() {
+      this.element = document.createElement(`audio`);
+      this.element.preload = `metadata`;
+      this.canPlay$ = rxjs.fromEvent(this.element, `canplay`).pipe(rxjs.share());
+      this.ended$ = rxjs.fromEvent(this.element, `ended`).pipe(rxjs.share());
+      this.isPlaying$ = rxjs.merge(
+        rxjs.fromEvent(this.element, `play`).pipe(rxjs.map(() => true)),
+        rxjs.fromEvent(this.element, `pause`).pipe(rxjs.map(() => false))
+      ).pipe(rxjs.share());
+      this.metrics$ = rxjs.merge(
+        rxjs.fromEvent(this.element, `timeupdate`),
+        rxjs.fromEvent(this.element, `seeking`),
+        rxjs.fromEvent(this.element, `seeked`),
+        rxjs.fromEvent(this.element, `loadedmetadata`),
+        rxjs.fromEvent(this.element, `durationchange`),
+        this.canPlay$
+      ).pipe(
+        rxjs.map(() => ({
+          currentTime: this.element.currentTime,
+          duration: Number.isFinite(this.element.duration) ? this.element.duration : void 0
+        })),
+        rxjs.share()
+      );
+    }
+    get paused() {
+      return this.element.paused;
+    }
+    get hasSource() {
+      return this.element.hasAttribute(`src`);
+    }
+    play$() {
+      return rxjs.defer(() => rxjs.from(this.element.play())).pipe(
+        rxjs.retry({
+          count: 1,
+          delay: () => this.canPlay$.pipe(rxjs.take(1))
+        })
+      );
+    }
+    pause() {
+      this.element.pause();
+    }
+    loadSource(src) {
+      this.element.src = src;
+      this.element.load();
+    }
+    unloadSource() {
+      this.element.removeAttribute(`src`);
+      this.element.load();
+    }
+    setCurrentTime(value) {
+      this.element.currentTime = value;
+    }
+  }
+
+  class ResourcesResolver {
+    cachedSourceByTrackId = /* @__PURE__ */ new Map();
+    hasCachedSource(trackId) {
+      return this.cachedSourceByTrackId.has(trackId);
+    }
+    getTrackResourceUrl$ = (track, resourcesHandler) => {
+      const cachedSource = this.cachedSourceByTrackId.get(track.id);
+      if (cachedSource) {
+        return rxjs.of(cachedSource.url);
+      }
+      const resource$ = rxjs.from(resourcesHandler.getResource());
+      return resource$.pipe(
+        rxjs.switchMap((resource) => {
+          if (resource instanceof URL) {
+            this.cachedSourceByTrackId.set(track.id, {
+              url: resource.href
+            });
+            return rxjs.of(resource.href);
+          }
+          if (resource instanceof Response) {
+            return rxjs.from(resource.blob()).pipe(
+              rxjs.map((blob) => {
+                const objectUrl = URL.createObjectURL(blob);
+                this.cachedSourceByTrackId.set(track.id, {
+                  url: objectUrl,
+                  release: () => {
+                    URL.revokeObjectURL(objectUrl);
+                  }
+                });
+                return objectUrl;
+              })
+            );
+          }
+          this.cachedSourceByTrackId.set(track.id, {
+            url: track.href
+          });
+          return rxjs.of(track.href);
+        })
+      );
+    };
+    releaseTrackSource(trackId) {
+      const cachedSource = this.cachedSourceByTrackId.get(trackId);
+      if (!cachedSource) return;
+      this.cachedSourceByTrackId.delete(trackId);
+      cachedSource.release?.();
+    }
+    releaseAll() {
+      for (const trackId of this.cachedSourceByTrackId.keys()) {
+        this.releaseTrackSource(trackId);
+      }
+    }
+    destroy() {
+      this.releaseAll();
+    }
+  }
+
+  const $ = (e, n) => e === n ? true : e.length !== n.length ? false : e.every((t, r) => t === n[r]);
+  const d = Object.prototype.hasOwnProperty, h = (e, n) => e === n ? e !== 0 || n !== 0 || 1 / e === 1 / n : false, _ = (e, n, t) => {
+    if (e === n)
+      return true;
+    if (typeof e != "object" || e === null || typeof n != "object" || n === null)
+      return false;
+    const r = Object.keys(e), l = Object.keys(n);
+    if (r.length !== l.length)
+      return false;
+    const o = t && typeof t.customEqual == "function" ? t.customEqual : h;
+    for (let c = 0; c < r.length; c++) {
+      const u = r[c] || "";
+      if (!d.call(n, u) || !o(e[u], n[u]))
+        return false;
+    }
+    return true;
+  };
+  const E = () => {
+    if (!(typeof window > "u"))
+      return window;
+  };
+  function w() {
+    const e = E()?.__PROSE_READER_DEBUG;
+    return e === true || e === "true";
+  }
+  const s = (e, n = w(), t) => {
+    let r = n;
+    const l = t?.color ? `color: ${t.color}` : void 0, o = {
+      enable: (i) => {
+        u(i);
+      },
+      namespace: (i, a) => s(`${e} [${i}]`, a, t),
+      isEnabled: () => r,
+      debug: () => {
+      },
+      info: () => {
+      },
+      log: () => {
+      },
+      groupCollapsed: () => {
+      },
+      groupEnd: () => {
+      },
+      getGroupArgs: (i) => l ? [`%c${e ? `${e} ${i}` : i}`, l] : [e ? `${e} ${i}` : i],
+      warn: () => {
+      },
+      error: () => {
+      }
+    }, c = (i) => {
+      if (!i) {
+        o.debug = () => {
+        }, o.info = () => {
+        }, o.log = () => {
+        }, o.groupCollapsed = () => {
+        }, o.groupEnd = () => {
+        }, o.warn = () => {
+        }, o.error = () => {
+        };
+        return;
+      }
+      o.debug = e ? Function.prototype.bind.call(
+        console.debug,
+        console,
+        e,
+        `%c${e}`,
+        l
+      ) : Function.prototype.bind.call(
+        console.debug,
+        console,
+        `%c${e}`,
+        l
+      ), o.info = Function.prototype.bind.call(
+        console.info,
+        console,
+        `%c${e}`,
+        l
+      ), o.log = e ? Function.prototype.bind.call(
+        console.log,
+        console,
+        `%c${e}`,
+        l
+      ) : Function.prototype.bind.call(console.log, console), o.groupCollapsed = Function.prototype.bind.call(
+        console.groupCollapsed,
+        console
+      ), o.groupEnd = Function.prototype.bind.call(console.groupEnd, console), o.warn = Function.prototype.bind.call(
+        console.warn,
+        console,
+        `%c${e}`,
+        l
+      ), o.error = Function.prototype.bind.call(
+        console.error,
+        console,
+        `%c${e}`,
+        l
+      );
+    }, u = (i) => {
+      r !== i && (r = i, c(r));
+    };
+    return c(r), o;
+  }; ({
+    ...s()});
+
+  const AUDIO_EXTENSIONS = /* @__PURE__ */ new Set([
+    `mp3`,
+    `m4a`,
+    `m4b`,
+    `aac`,
+    `ogg`,
+    `oga`,
+    `wav`,
+    `flac`,
+    `opus`
+  ]);
+  const getExtensionFromHref = (href) => {
+    const [pathname = ``] = href.split(/[?#]/);
+    const segments = pathname.split(`/`);
+    const basename = segments.at(-1) ?? ``;
+    const extension = basename.split(`.`).at(-1);
+    return extension?.toLowerCase();
+  };
+  const isAudioSpineItem = (item) => {
+    const mediaType = item.mediaType?.split(`;`).at(0)?.trim().toLowerCase();
+    if (mediaType?.startsWith(`audio/`)) {
+      return true;
+    }
+    const extension = getExtensionFromHref(item.href);
+    return extension ? AUDIO_EXTENSIONS.has(extension) : false;
+  };
+
+  const getTrackAtSpineItemIndex = (tracks, index) => {
+    if (index === void 0) return void 0;
+    return tracks.find((track) => track.index === index);
+  };
+  const getVisibleTracks = (tracks, pagination) => {
+    const beginTrack = getTrackAtSpineItemIndex(
+      tracks,
+      pagination.beginSpineItemIndex
+    );
+    const endTrack = getTrackAtSpineItemIndex(
+      tracks,
+      pagination.endSpineItemIndex
+    );
+    return [beginTrack, endTrack].filter(
+      (track, i, arr) => track !== void 0 && arr.indexOf(track) === i
+    );
+  };
+  function createTrackStreams(reader, state$) {
+    const tracks$ = reader.context.manifest$.pipe(
+      rxjs.map(
+        (manifest) => manifest.spineItems.filter(isAudioSpineItem).map((item) => ({
+          id: item.id,
+          href: item.href,
+          index: item.index,
+          mediaType: item.mediaType
+        }))
+      ),
+      rxjs.shareReplay({ bufferSize: 1, refCount: true })
+    );
+    const pagination$ = reader.pagination.state$.pipe(
+      core.mapKeysTo([`beginSpineItemIndex`, `endSpineItemIndex`]),
+      rxjs.distinctUntilChanged(_),
+      rxjs.shareReplay({ bufferSize: 1, refCount: true })
+    );
+    const visibleTrackIds$ = rxjs.combineLatest([tracks$, pagination$]).pipe(
+      rxjs.map(
+        ([tracks, pagination]) => getVisibleTracks(tracks, pagination).map(({ id }) => id)
+      ),
+      rxjs.distinctUntilChanged($),
+      rxjs.shareReplay({ bufferSize: 1, refCount: true })
+    );
+    const currentTrack$ = state$.pipe(
+      rxjs.map((state) => state.currentTrack),
+      rxjs.distinctUntilChanged()
+    );
+    const nextTrack$ = rxjs.combineLatest([tracks$, pagination$, currentTrack$]).pipe(
+      rxjs.map(([tracks, { endSpineItemIndex }, currentTrack]) => {
+        const nextTrackInPaginationWindow = currentTrack && endSpineItemIndex !== void 0 ? tracks.find(
+          ({ index }) => index > currentTrack.index && index <= endSpineItemIndex
+        ) : void 0;
+        const nextTrackAfterCurrentTrack = currentTrack ? tracks.find(({ index }) => index > currentTrack.index) : void 0;
+        return { nextTrackInPaginationWindow, nextTrackAfterCurrentTrack };
+      }),
+      rxjs.shareReplay({ bufferSize: 1, refCount: true })
+    );
+    return {
+      tracks$,
+      visibleTrackIds$,
+      nextTrack$
+    };
+  }
+
+  const initialDesiredPlayback = {
+    shouldPlay: false,
+    trackId: void 0
+  };
+  const initialState = {
+    tracks: [],
+    currentTrack: void 0,
+    isPlaying: false,
+    isLoading: false,
+    hasError: false,
+    currentTime: 0,
+    duration: void 0
+  };
+  class AudioController extends core.ReactiveEntity {
+    reader;
+    audio;
+    visualizer$;
+    resourcesResolver = new ResourcesResolver();
+    visibleTrackIds$;
+    playCommandSubject = new rxjs.Subject();
+    pauseCommandSubject = new rxjs.Subject();
+    selectCommandSubject = new rxjs.Subject();
+    desiredPlayback$ = new rxjs.BehaviorSubject(
+      initialDesiredPlayback
+    );
+    subscriptions = new rxjs.Subscription();
+    constructor(reader, audio = new AudioElementAdapter()) {
+      super(initialState);
+      this.reader = reader;
+      this.audio = audio;
+      this.visualizer$ = new AudioVisualizer(this.audio.element);
+      const { tracks$, visibleTrackIds$, nextTrack$ } = createTrackStreams(
+        this.reader,
+        this.state$
+      );
+      this.visibleTrackIds$ = visibleTrackIds$;
+      const firstVisibleTrackId$ = this.visibleTrackIds$.pipe(
+        rxjs.map((trackIds) => trackIds[0]),
+        rxjs.distinctUntilChanged(),
+        rxjs.share()
+      );
+      const visibleTrackReset$ = firstVisibleTrackId$.pipe(
+        rxjs.withLatestFrom(this.state$),
+        rxjs.filter(
+          ([trackId, state]) => trackId === void 0 && (state.currentTrack?.id !== void 0 || state.isLoading)
+        ),
+        rxjs.map(([, state]) => state.tracks)
+      );
+      const visibleTrackSelectionIntent$ = firstVisibleTrackId$.pipe(
+        rxjs.filter((trackId) => trackId !== void 0),
+        rxjs.withLatestFrom(this.desiredPlayback$),
+        rxjs.map(([trackId, { shouldPlay }]) => ({
+          trackId,
+          options: {
+            navigate: false,
+            play: shouldPlay ? true : void 0
+          }
+        }))
+      );
+      const tracksChanged$ = tracks$.pipe(
+        rxjs.tap(() => this.resourcesResolver.releaseAll())
+      );
+      const playbackReset$ = rxjs.merge(visibleTrackReset$, tracksChanged$).pipe(
+        rxjs.tap((tracks) => {
+          this.emitDesiredPlayback({ shouldPlay: false, trackId: void 0 });
+          this.visualizer$.stop({ resetLevels: true });
+          this.unmountCurrentSource();
+          this.mergeCompare({
+            tracks,
+            currentTrack: void 0,
+            isLoading: false,
+            isPlaying: false,
+            hasError: false,
+            currentTime: 0,
+            duration: void 0
+          });
+          this.visualizer$.reset(void 0);
+        }),
+        rxjs.share()
+      );
+      const playSelectionIntent$ = this.playCommandSubject.pipe(
+        rxjs.filter(() => !this.audio.hasSource),
+        rxjs.map(() => this.state.currentTrack ?? this.state.tracks[0]),
+        rxjs.filter(core.isDefined),
+        rxjs.map((track) => ({
+          trackId: track.id,
+          options: { navigate: false, play: true }
+        }))
+      );
+      const resumePlayback$ = this.playCommandSubject.pipe(
+        rxjs.filter(() => this.audio.hasSource),
+        rxjs.tap(() => {
+          this.emitDesiredPlayback({
+            shouldPlay: true,
+            trackId: this.state.currentTrack?.id
+          });
+        })
+      );
+      const endedSelectionIntent$ = this.audio.ended$.pipe(
+        rxjs.withLatestFrom(nextTrack$),
+        rxjs.switchMap(
+          ([, { nextTrackAfterCurrentTrack, nextTrackInPaginationWindow }]) => {
+            this.visualizer$.stop({ resetLevels: true });
+            if (nextTrackInPaginationWindow) {
+              return rxjs.of({
+                trackId: nextTrackInPaginationWindow.id,
+                options: { navigate: false, play: true }
+              });
+            }
+            if (!nextTrackAfterCurrentTrack) {
+              this.emitDesiredPlayback({ shouldPlay: false, trackId: void 0 });
+            }
+            this.reader.navigation.goToRightOrBottomSpineItem();
+            return rxjs.EMPTY;
+          }
+        )
+      );
+      const selection$ = rxjs.merge(
+        this.selectCommandSubject,
+        visibleTrackSelectionIntent$,
+        endedSelectionIntent$,
+        playSelectionIntent$
+      ).pipe(
+        rxjs.withLatestFrom(this.state$),
+        rxjs.filter(
+          ([selectionIntent, state]) => state.tracks.some(({ id }) => id === selectionIntent.trackId)
+        ),
+        rxjs.map(([selectionIntent, state]) => ({
+          selectionIntent,
+          state,
+          isReselectionWhileLoading: state.currentTrack?.id === selectionIntent.trackId && state.isLoading
+        })),
+        rxjs.tap(({ selectionIntent, state, isReselectionWhileLoading }) => {
+          if (selectionIntent.options.navigate !== false) {
+            this.reader.navigation.navigate({
+              spineItem: selectionIntent.trackId,
+              animation: `turn`
+            });
+          }
+          if (isReselectionWhileLoading && selectionIntent.options.play !== void 0) {
+            this.emitDesiredPlayback({
+              shouldPlay: selectionIntent.options.play,
+              trackId: state.currentTrack?.id
+            });
+          }
+        }),
+        rxjs.filter(({ isReselectionWhileLoading }) => !isReselectionWhileLoading),
+        rxjs.switchMap(
+          ({ selectionIntent: { trackId, options } }) => this.selectTrack$({ trackId, options, playbackReset$ })
+        )
+      );
+      const playback$ = rxjs.merge(resumePlayback$, selection$).pipe(
+        rxjs.withLatestFrom(this.desiredPlayback$),
+        rxjs.switchMap(([, { shouldPlay, trackId }]) => {
+          if (!shouldPlay || !this.audio.hasSource || this.state.currentTrack?.id !== trackId) {
+            return rxjs.EMPTY;
+          }
+          this.mergeCompare({ hasError: false });
+          return this.audio.play$().pipe(
+            rxjs.catchError(() => {
+              this.mergeCompare({ hasError: true });
+              return rxjs.EMPTY;
+            })
+          );
+        })
+      );
+      this.subscriptions.add(playbackReset$.subscribe());
+      this.subscriptions.add(playback$.subscribe());
+      this.subscriptions.add(
+        this.pauseCommandSubject.subscribe(() => {
+          this.emitDesiredPlayback({ shouldPlay: false, trackId: void 0 });
+        })
+      );
+      this.subscriptions.add(
+        this.audio.isPlaying$.subscribe((isPlaying) => {
+          this.mergeCompare({ isPlaying });
+          if (!isPlaying) {
+            this.visualizer$.stop();
+            return;
+          }
+          if (!this.state.currentTrack) return;
+          this.visualizer$.start(this.state.currentTrack);
+        })
+      );
+      this.subscriptions.add(
+        this.audio.metrics$.subscribe(({ currentTime, duration }) => {
+          this.mergeCompare({ currentTime, duration });
+        })
+      );
+    }
+    get state() {
+      return this.value;
+    }
+    get visualizer() {
+      return this.visualizer$.value;
+    }
+    resetTrackSelection({
+      currentTrack,
+      isLoading
+    }) {
+      this.mergeCompare({
+        currentTrack,
+        isLoading,
+        isPlaying: false,
+        hasError: false,
+        currentTime: 0,
+        duration: void 0
+      });
+      this.visualizer$.reset(currentTrack?.id);
+    }
+    emitDesiredPlayback({ shouldPlay, trackId }) {
+      this.desiredPlayback$.next({
+        shouldPlay,
+        trackId: shouldPlay ? trackId : void 0
+      });
+      if (!shouldPlay) {
+        this.audio.pause();
+      }
+    }
+    unmountCurrentSource() {
+      if (!this.audio.hasSource) return;
+      const trackId = this.state.currentTrack?.id;
+      if (!this.audio.paused) {
+        this.audio.pause();
+      }
+      this.audio.unloadSource();
+      if (trackId) {
+        this.resourcesResolver.releaseTrackSource(trackId);
+      }
+    }
+    mountSource(source) {
+      this.unmountCurrentSource();
+      this.audio.loadSource(source);
+    }
+    resolveTrackSource(track) {
+      const spineItem = this.reader.spineItemsManager.get(track.index);
+      if (!spineItem) return rxjs.EMPTY;
+      return this.resourcesResolver.getTrackResourceUrl$(
+        track,
+        spineItem.resourcesHandler
+      );
+    }
+    selectTrack$({
+      trackId,
+      options,
+      playbackReset$
+    }) {
+      const track = this.state.tracks.find(({ id }) => id === trackId);
+      if (!track) return rxjs.EMPTY;
+      const currentTrack = this.state.currentTrack;
+      const shouldPlay = options.play ?? (!this.audio.paused && currentTrack !== void 0);
+      this.emitDesiredPlayback({ shouldPlay, trackId: track.id });
+      if (currentTrack?.id === track.id && this.audio.hasSource) {
+        this.visualizer$.setTrack(track.id);
+        return shouldPlay ? rxjs.of(void 0) : rxjs.EMPTY;
+      }
+      this.unmountCurrentSource();
+      this.resetTrackSelection({
+        currentTrack: track,
+        isLoading: true
+      });
+      return this.resolveTrackSource(track).pipe(
+        rxjs.map((source) => ({ source })),
+        rxjs.defaultIfEmpty({ source: void 0 }),
+        rxjs.catchError(() => rxjs.of({ source: void 0 })),
+        rxjs.takeUntil(playbackReset$),
+        rxjs.tap(({ source }) => {
+          if (!source) {
+            this.emitDesiredPlayback({ shouldPlay: false, trackId: void 0 });
+          } else {
+            this.mountSource(source);
+          }
+          this.mergeCompare({ isLoading: false });
+        }),
+        rxjs.filter(({ source }) => source !== void 0),
+        rxjs.map(() => void 0)
+      );
+    }
+    select(trackId, options = {}) {
+      this.selectCommandSubject.next({ trackId, options });
+    }
+    play() {
+      this.playCommandSubject.next();
+    }
+    pause() {
+      this.pauseCommandSubject.next();
+    }
+    toggle() {
+      if (this.audio.paused) {
+        this.play();
+        return;
+      }
+      this.pause();
+    }
+    setCurrentTime(value) {
+      this.mergeCompare({ currentTime: value });
+      this.audio.setCurrentTime(value);
+    }
+    destroy() {
+      this.subscriptions.unsubscribe();
+      this.playCommandSubject.complete();
+      this.pauseCommandSubject.complete();
+      this.selectCommandSubject.complete();
+      this.desiredPlayback$.complete();
+      this.visualizer$.destroy();
+      this.unmountCurrentSource();
+      this.resourcesResolver.destroy();
+      super.destroy();
+    }
+  }
+
+  class AudioRenderer extends core.DocumentRenderer {
+    onCreateDocument() {
+      const ownerDocument = this.containerElement.ownerDocument;
+      const rootElement = ownerDocument.createElement(`div`);
+      rootElement.style.cssText = `
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      display: block;
+    `;
+      rootElement.setAttribute(`data-prose-reader-audio-page`, this.item.id);
+      this.setDocumentContainer(rootElement);
+      return rxjs.of(rootElement);
+    }
+    onLoadDocument() {
+      this.attach();
+      return rxjs.EMPTY;
+    }
+    onUnload() {
+      this.detach();
+      return rxjs.EMPTY;
+    }
+    onLayout() {
+      const { width, height } = this.viewport.pageSize;
+      const rootElement = this.documentContainer;
+      if (rootElement) {
+        rootElement.style.width = `${width}px`;
+        rootElement.style.height = `${height}px`;
+      }
+      return rxjs.of({ width, height });
+    }
+    onRenderHeadless() {
+      return rxjs.EMPTY;
+    }
+    getDocumentFrame() {
+      return void 0;
+    }
+    /**
+     * Audio spine items are always pre-paginated (one track per page).
+     * Mixed audio/text books with reflowable audio chapters may need
+     * to revisit this if that use case arises.
+     */
+    get renditionLayout() {
+      return `pre-paginated`;
+    }
+  }
+
+  const audioEnhancer = (next) => (options) => {
+    const readerOptions = { ...options };
+    const reader = next({
+      ...readerOptions,
+      getRenderer(item) {
+        const maybeFactory = options.getRenderer?.(item);
+        if (maybeFactory) {
+          return maybeFactory;
+        }
+        if (isAudioSpineItem(item)) {
+          return (params) => new AudioRenderer(params);
+        }
+        return void 0;
+      }
+    });
+    const controller = new AudioController(reader);
+    const destroy = () => {
+      controller.destroy();
+      reader.destroy();
+    };
+    return {
+      ...reader,
+      __PROSE_READER_ENHANCER_AUDIO: true,
+      destroy,
+      audio: {
+        state$: controller.state$,
+        visualizer$: controller.visualizer$,
+        visibleTrackIds$: controller.visibleTrackIds$,
+        get state() {
+          return controller.state;
+        },
+        get visualizer() {
+          return controller.visualizer;
+        },
+        isAudioRenderer: (renderer) => renderer instanceof AudioRenderer,
+        play: () => controller.play(),
+        pause: () => controller.pause(),
+        toggle: () => controller.toggle(),
+        setCurrentTime: (value) => controller.setCurrentTime(value),
+        select: (trackId, options2) => controller.select(trackId, options2)
+      }
+    };
+  };
+
+  exports.AudioRenderer = AudioRenderer;
+  exports.audioEnhancer = audioEnhancer;
+  exports.isAudioSpineItem = isAudioSpineItem;
+
+  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+}));
+//# sourceMappingURL=index.umd.cjs.map