lrc-audio-player 0.1.3 → 0.1.5

package/dist/react.cjs

@@ -402,33 +402,116 @@ function useLyricPlayer(options) {
   const [player, setPlayer] = (0, import_react.useState)(null);
   const [currentLine, setCurrentLine] = (0, import_react.useState)(null);
   const [currentIndex, setCurrentIndex] = (0, import_react.useState)(-1);
+  const [currentToken, setCurrentToken] = (0, import_react.useState)(null);
   const [lines, setLines] = (0, import_react.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [isPlaying, setIsPlaying] = (0, import_react.useState)(false);
+  const [currentTime, setCurrentTime] = (0, import_react.useState)(0);
+  const [duration, setDuration] = (0, import_react.useState)(0);
   const optionsRef = (0, import_react.useRef)(options);
   optionsRef.current = options;
   (0, import_react.useEffect)(() => {
     const audioEl = audioRef.current;
     if (!audioEl) return;
-    const { audio, lyrics, offsetMs } = optionsRef.current;
+    const { audio, lyrics, offsetMs, skipCBR, cbrBitrate } = optionsRef.current;
     if (audio) audioEl.src = audio;
-    const instance = new LyricPlayer({
-      audio: audioEl,
-      lyrics,
-      offsetMs
-    });
-    setPlayer(instance);
-    setLines(instance.lines);
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    setPlayer(null);
+    setLines([]);
     setCurrentLine(null);
     setCurrentIndex(-1);
-    instance.on("linechange", (line, index) => {
-      setCurrentLine(line);
-      setCurrentIndex(index);
+    setCurrentToken(null);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+    LyricPlayer.create({
+      audio: audioEl,
+      lyrics,
+      offsetMs,
+      skipCBR,
+      cbrBitrate
+    }).then((instance) => {
+      if (cancelled) {
+        instance.destroy();
+        return;
+      }
+      setPlayer(instance);
+      setLines(instance.lines);
+      setDuration(instance.duration);
+      setIsLoading(false);
+      instance.on("linechange", (line, index) => {
+        setCurrentLine(line);
+        setCurrentIndex(index);
+      });
+      instance.on("timeupdate", (time) => {
+        setCurrentTime(time);
+        setCurrentToken(instance.getCurrentToken());
+      });
+      instance.on("play", () => setIsPlaying(true));
+      instance.on("pause", () => setIsPlaying(false));
+      instance.on("ended", () => setIsPlaying(false));
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
     });
     return () => {
-      instance.destroy();
-      setPlayer(null);
+      cancelled = true;
+      setPlayer((prev) => {
+        prev?.destroy();
+        return null;
+      });
     };
-  }, [options.audio, options.lyrics, options.offsetMs]);
-  return { player, audioRef, currentLine, currentIndex, lines };
+  }, [
+    options.audio,
+    options.lyrics,
+    options.offsetMs,
+    options.skipCBR,
+    options.cbrBitrate
+  ]);
+  const seek = (0, import_react.useCallback)(
+    (timeSeconds) => {
+      player?.seek(timeSeconds);
+    },
+    [player]
+  );
+  const seekToLine = (0, import_react.useCallback)(
+    (index) => {
+      player?.seekToLine(index);
+    },
+    [player]
+  );
+  const play = (0, import_react.useCallback)(() => {
+    return player?.play() ?? Promise.resolve();
+  }, [player]);
+  const pause = (0, import_react.useCallback)(() => {
+    player?.pause();
+  }, [player]);
+  const toggle = (0, import_react.useCallback)(() => {
+    return player?.toggle();
+  }, [player]);
+  return {
+    player,
+    audioRef,
+    currentLine,
+    currentIndex,
+    currentToken,
+    lines,
+    isLoading,
+    error,
+    isPlaying,
+    currentTime,
+    duration,
+    seek,
+    seekToLine,
+    play,
+    pause,
+    toggle
+  };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/react.d.cts

@@ -1,9 +1,13 @@
-import { h as LyricPlayerOptions, b as LyricPlayer, L as LyricLine } from './player-sLsiwLVO.cjs';
+import { h as LyricPlayerOptions, b as LyricPlayer, L as LyricLine, g as LyricToken } from './player-sLsiwLVO.cjs';
 export { f as LyricSource } from './player-sLsiwLVO.cjs';
 
 interface UseLyricPlayerOptions extends Omit<LyricPlayerOptions, "audio"> {
     /** Audio source URL. Set on the bound <audio> element. */
     audio?: string;
+    /** Skip CBR conversion if your audio is already constant bitrate. */
+    skipCBR?: boolean;
+    /** Target bitrate for CBR conversion. @default '128k' */
+    cbrBitrate?: string;
 }
 interface UseLyricPlayerResult {
     /** The underlying player instance (null until mounted and ready). */
@@ -14,8 +18,30 @@ interface UseLyricPlayerResult {
     currentLine: LyricLine | null;
     /** Index of the currently active lyric line (-1 if none yet). */
     currentIndex: number;
+    /** The currently active word/token (for word-level LRC), or null. */
+    currentToken: LyricToken | null;
     /** All parsed lyric lines (empty until lyrics are loaded). */
     lines: LyricLine[];
+    /** Whether the player is initializing (CBR conversion in progress). */
+    isLoading: boolean;
+    /** Error if initialization failed. */
+    error: Error | null;
+    /** Whether audio is currently playing. */
+    isPlaying: boolean;
+    /** Current playback time in seconds. */
+    currentTime: number;
+    /** Total audio duration in seconds (0 if unknown). */
+    duration: number;
+    /** Jump to a specific time in seconds. */
+    seek: (timeSeconds: number) => void;
+    /** Jump to the start of a specific lyric line. */
+    seekToLine: (index: number) => void;
+    /** Play the audio. */
+    play: () => Promise<void>;
+    /** Pause the audio. */
+    pause: () => void;
+    /** Toggle play/pause. */
+    toggle: () => Promise<void> | void;
 }
 /**
  * React hook that creates a {@link LyricPlayer} bound to an `<audio>`
@@ -28,7 +54,7 @@ interface UseLyricPlayerResult {
  * ```tsx
  * 'use client';
  *
- * const { audioRef, currentLine, lines, player } = useLyricPlayer({
+ * const { audioRef, currentLine, lines, isLoading, isPlaying, currentTime } = useLyricPlayer({
  *   audio: '/song.mp3',
  *   lyrics: lrcText,
  * });
@@ -36,15 +62,11 @@ interface UseLyricPlayerResult {
  * return (
  *   <>
  *     <audio ref={audioRef} controls />
+ *     {isLoading && <p>Loading audio…</p>}
  *     <p>{currentLine?.text}</p>
  *   </>
  * );
  * ```
- *
- * The player is recreated whenever `audio` or `lyrics` change. If you're
- * fetching lyrics asynchronously, wait until they're loaded before calling
- * this hook (or pass `lyrics: ''` while loading - an empty string parses
- * to zero lines and is cheap to recreate).
  */
 declare function useLyricPlayer(options: UseLyricPlayerOptions): UseLyricPlayerResult;
 

package/dist/react.d.ts

@@ -1,9 +1,13 @@
-import { h as LyricPlayerOptions, b as LyricPlayer, L as LyricLine } from './player-sLsiwLVO.js';
+import { h as LyricPlayerOptions, b as LyricPlayer, L as LyricLine, g as LyricToken } from './player-sLsiwLVO.js';
 export { f as LyricSource } from './player-sLsiwLVO.js';
 
 interface UseLyricPlayerOptions extends Omit<LyricPlayerOptions, "audio"> {
     /** Audio source URL. Set on the bound <audio> element. */
     audio?: string;
+    /** Skip CBR conversion if your audio is already constant bitrate. */
+    skipCBR?: boolean;
+    /** Target bitrate for CBR conversion. @default '128k' */
+    cbrBitrate?: string;
 }
 interface UseLyricPlayerResult {
     /** The underlying player instance (null until mounted and ready). */
@@ -14,8 +18,30 @@ interface UseLyricPlayerResult {
     currentLine: LyricLine | null;
     /** Index of the currently active lyric line (-1 if none yet). */
     currentIndex: number;
+    /** The currently active word/token (for word-level LRC), or null. */
+    currentToken: LyricToken | null;
     /** All parsed lyric lines (empty until lyrics are loaded). */
     lines: LyricLine[];
+    /** Whether the player is initializing (CBR conversion in progress). */
+    isLoading: boolean;
+    /** Error if initialization failed. */
+    error: Error | null;
+    /** Whether audio is currently playing. */
+    isPlaying: boolean;
+    /** Current playback time in seconds. */
+    currentTime: number;
+    /** Total audio duration in seconds (0 if unknown). */
+    duration: number;
+    /** Jump to a specific time in seconds. */
+    seek: (timeSeconds: number) => void;
+    /** Jump to the start of a specific lyric line. */
+    seekToLine: (index: number) => void;
+    /** Play the audio. */
+    play: () => Promise<void>;
+    /** Pause the audio. */
+    pause: () => void;
+    /** Toggle play/pause. */
+    toggle: () => Promise<void> | void;
 }
 /**
  * React hook that creates a {@link LyricPlayer} bound to an `<audio>`
@@ -28,7 +54,7 @@ interface UseLyricPlayerResult {
  * ```tsx
  * 'use client';
  *
- * const { audioRef, currentLine, lines, player } = useLyricPlayer({
+ * const { audioRef, currentLine, lines, isLoading, isPlaying, currentTime } = useLyricPlayer({
  *   audio: '/song.mp3',
  *   lyrics: lrcText,
  * });
@@ -36,15 +62,11 @@ interface UseLyricPlayerResult {
  * return (
  *   <>
  *     <audio ref={audioRef} controls />
+ *     {isLoading && <p>Loading audio…</p>}
  *     <p>{currentLine?.text}</p>
  *   </>
  * );
  * ```
- *
- * The player is recreated whenever `audio` or `lyrics` change. If you're
- * fetching lyrics asynchronously, wait until they're loaded before calling
- * this hook (or pass `lyrics: ''` while loading - an empty string parses
- * to zero lines and is cheap to recreate).
  */
 declare function useLyricPlayer(options: UseLyricPlayerOptions): UseLyricPlayerResult;
 

package/dist/react.js

@@ -4,39 +4,122 @@ import {
 } from "./chunk-3A2M5KTA.js";
 
 // src/react.ts
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 function useLyricPlayer(options) {
   const audioRef = useRef(null);
   const [player, setPlayer] = useState(null);
   const [currentLine, setCurrentLine] = useState(null);
   const [currentIndex, setCurrentIndex] = useState(-1);
+  const [currentToken, setCurrentToken] = useState(null);
   const [lines, setLines] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0);
   const optionsRef = useRef(options);
   optionsRef.current = options;
   useEffect(() => {
     const audioEl = audioRef.current;
     if (!audioEl) return;
-    const { audio, lyrics, offsetMs } = optionsRef.current;
+    const { audio, lyrics, offsetMs, skipCBR, cbrBitrate } = optionsRef.current;
     if (audio) audioEl.src = audio;
-    const instance = new LyricPlayer({
-      audio: audioEl,
-      lyrics,
-      offsetMs
-    });
-    setPlayer(instance);
-    setLines(instance.lines);
+    let cancelled = false;
+    setIsLoading(true);
+    setError(null);
+    setPlayer(null);
+    setLines([]);
     setCurrentLine(null);
     setCurrentIndex(-1);
-    instance.on("linechange", (line, index) => {
-      setCurrentLine(line);
-      setCurrentIndex(index);
+    setCurrentToken(null);
+    setIsPlaying(false);
+    setCurrentTime(0);
+    setDuration(0);
+    LyricPlayer.create({
+      audio: audioEl,
+      lyrics,
+      offsetMs,
+      skipCBR,
+      cbrBitrate
+    }).then((instance) => {
+      if (cancelled) {
+        instance.destroy();
+        return;
+      }
+      setPlayer(instance);
+      setLines(instance.lines);
+      setDuration(instance.duration);
+      setIsLoading(false);
+      instance.on("linechange", (line, index) => {
+        setCurrentLine(line);
+        setCurrentIndex(index);
+      });
+      instance.on("timeupdate", (time) => {
+        setCurrentTime(time);
+        setCurrentToken(instance.getCurrentToken());
+      });
+      instance.on("play", () => setIsPlaying(true));
+      instance.on("pause", () => setIsPlaying(false));
+      instance.on("ended", () => setIsPlaying(false));
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
     });
     return () => {
-      instance.destroy();
-      setPlayer(null);
+      cancelled = true;
+      setPlayer((prev) => {
+        prev?.destroy();
+        return null;
+      });
     };
-  }, [options.audio, options.lyrics, options.offsetMs]);
-  return { player, audioRef, currentLine, currentIndex, lines };
+  }, [
+    options.audio,
+    options.lyrics,
+    options.offsetMs,
+    options.skipCBR,
+    options.cbrBitrate
+  ]);
+  const seek = useCallback(
+    (timeSeconds) => {
+      player?.seek(timeSeconds);
+    },
+    [player]
+  );
+  const seekToLine = useCallback(
+    (index) => {
+      player?.seekToLine(index);
+    },
+    [player]
+  );
+  const play = useCallback(() => {
+    return player?.play() ?? Promise.resolve();
+  }, [player]);
+  const pause = useCallback(() => {
+    player?.pause();
+  }, [player]);
+  const toggle = useCallback(() => {
+    return player?.toggle();
+  }, [player]);
+  return {
+    player,
+    audioRef,
+    currentLine,
+    currentIndex,
+    currentToken,
+    lines,
+    isLoading,
+    error,
+    isPlaying,
+    currentTime,
+    duration,
+    seek,
+    seekToLine,
+    play,
+    pause,
+    toggle
+  };
 }
 export {
   useLyricPlayer

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lrc-audio-player",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Sync LRC/word-level lyrics to an HTML audio element with one constructor. Includes an optional React hook at lrc-audio-player/react.",
   "repository": {
     "type": "git",