@imsyy/lyric

Lyrics rendering component.

Install

pnpm add @imsyy/lyric

Usage

<script setup lang="ts">
import { ref } from "vue";
import { LyricPlayer, type LyricLine } from "@imsyy/lyric";
import "@imsyy/lyric/style.css";

const lyrics = ref<LyricLine[]>([
  /* ... */
]);
const playerRef = ref<InstanceType<typeof LyricPlayer>>();

// Push the current playback time (in milliseconds) every frame
const onTimeUpdate = (ms: number) => playerRef.value?.setCurrentTime(ms);
</script>

<template>
  <LyricPlayer
    ref="playerRef"
    :lyric-lines="lyrics"
    :playing="true"
    @seek="onSeek"
  />
</template>

Advanced

// Drive the DOM directly without Vue
import { LyricRenderer } from "@imsyy/lyric";

const renderer = new LyricRenderer(containerEl, {
  /* config */
});
renderer.setLyrics(lines);
renderer.setCurrentTime(ms);

License

AGPL-3.0-only