🐇 Rabbit Lyrics 🐇

💡 Introduction

Rabbit Lyrics is an audio and timed lyrics synchronizer for web. No jQuery required. No dependencies.

Yes, here are already many similar things but Rabbit Lyrics has something special:

  1. Highlight multiple lines at the same time. Especially useful when adding translations.
  2. Do not depend on jQuery or any other libraries.
  3. Predefined themes for different web design.

WordPress plugin is also available.

📦 Install

You can install through NPM:

npm install rabbit-lyrics --save

Import it into your project using Webpack (require css-loader and style-loader): 

import RabbitLyrics from 'rabbit-lyrics'

Or link CDN version in HTML:

<script src="https://unpkg.com/rabbit-lyrics" type="text/javascript"></script>

🚀 Initialize

HTML

When using HTML markups to initialize lyrics, you must add class rabbit-lyrics to the lyrics container.

Idealy, add data-media attribute to specify the selector of audio or video element that you want to synchronize with lyrics. If data-media is not provided or element cannot be found, it will search first audio or video element before lyrics container. 

<audio id="audio-1" controls>
    <source src="audio-1.ogg" type="audio/ogg">
    <source src="audio-1.mp3" type="audio/mpeg">
</audio>

<div class="rabbit-lyrics" data-media="#audio-1">
[00:05.00] This is a little song
[00:07.00] The song that nobody knows
...
</div>

JavaScript

When using JavaScript to initialize lyrics, you must NOT add rabbit-lyrics class to lyrics container.

If mediaElement is not provided or element cannot be found, it will search first audio or video element before lyrics container. 

<audio id="audio-1" controls>
    <source src="audio-1.ogg" type="audio/ogg">
    <source src="audio-1.mp3" type="audio/mpeg">
</audio>

<div id="lyrics-1">
[00:05.00] This is a little song
[00:07.00] The song that nobody knows
...
</div>
new RabbitLyrics({
    element: document.findElementById('lyrics-1'),
    mediaElement: document.findElementById('audio-1')
})

🎛️ Options

element

Type: HTMLElement

The block element that contains lyrics.

mediaElement

Type: HTMLMediaElement (audio or video elements)

Default: the first audio or video element before

HTML attribute: data-media-element (selector of media element)

viewMode

Type: string

Default: 'default'

HTML attribute: data-view-mode

Available values:

🎮 Examples

Basic lyrics

{{japanese}}

Multiple lines and translations

The following lyrics contains Japanese, Rōmaji and Chinese translation. It highlights three lines at the same time.

{{combined}}

Karaoke lyrics

{{romaji}}

Multiple lyrics blocks

The following audio has two lyrics, one is in Japanese and the other is in Chinese.

{{japanese}}
{{chinese}}

Mini view mode

{{japanese}}

Full view mode

{{japanese}}