@outbook/webcomponents-lyrics

This package provides a web component for displaying synchronized lyrics. It can either take lyrics text directly or fetch them from a provided route, and synchronize their display with a given current time.

Installation

npm install @outbook/webcomponents-lyrics

Usage

As a Lit Element

import {html} from 'lit';
import {Lyrics} from '@outbook/webcomponents-lyrics';

function render() {
  const exampleLyrics = `
[00:10.00]Hello
[00:15.00]World
`;
  const currentTime = 12; // Example current time in seconds

  return html`
    ${Lyrics({
    lang: 'en',
    text: exampleLyrics,
    // Or use route: 'path/to/lyrics.lrc',
    currentTime: currentTime,
  })}
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

import '@outbook/webcomponents-lyrics';

<outbook-lyrics
  lang="en"
  route="path/to/lyrics.lrc"
  current-time="12"
></outbook-lyrics>

<!-- Or with direct text content (property binding in frameworks) -->
<outbook-lyrics lang="en"></outbook-lyrics>
<script>
  const lyricsElement = document.querySelector('outbook-lyrics');
  lyricsElement.text = `
[00:10.00]Hello
[00:15.00]World
`;
</script>

Component: outbook-lyrics

This is the underlying web component. It can be used directly in HTML or in any framework.

Properties / Attributes

| Attribute | Property | Type | Default | Description | |----------------|---------------|-----------|-------------|-----------------------------------------------------------------| | lang | lang | String | 'en' | The language for localization of internal texts. | | route | route | String | null | URL to fetch LRC-formatted lyrics from. | | current-time | currentTime | Number | 0 | Current time in seconds to synchronize the lyrics display. | | | text | String | null | Direct LRC-formatted lyrics text content. Overrides route. |

Events

This component does not dispatch any custom events.

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |--------------------------------------------|-------------------------------------------------------------| | --outbook-lyrics--color-text | The color of the displayed lyrics text. | | --outbook-lyrics--color-shadow | The color of the text shadow applied to the lyrics. |

License

This component is licensed under the Apache-2.0 License.