guoyunhe / rabbit-lyrics Goto Github PK

JavaScript audio and timed lyrics synchronizer.

Home Page: https://guoyunhe.github.io/rabbit-lyrics/

License: GNU Affero General Public License v3.0

CSS 5.16% JavaScript 2.08% TypeScript 92.77%

rabbit-lyrics timed-lyrics-synchronizer javascript-audio javascript auto-scroll lyrics music karaoke lyrics-widget audio

rabbit-lyrics's Introduction

🐇 Rabbit Lyrics 🐇

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

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

Highlight multiple lines at the same time. Useful when adding translations.
Karaoke mode.
Do not depend on jQuery or any other libraries.

Document and examples

WordPress plugin

Join the Telegram group

Released under GNU Affero General Public License version 3 or later

rabbit-lyrics's People

Contributors

Stargazers

Watchers

rabbit-lyrics's Issues

I'm trying to get this to work by following the examples. but it isn't working

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="path/to/rabbit-lyrics/dist/rabbit-lyrics.css" rel="stylesheet" type="text/css"/>
    <script src="path/to/rabbit-lyrics/dist/rabbit-lyrics.js" type="text/javascript"></script>
</head>
 <body>
     <audio id="audio-1" controls>
         <!-- <source src="audio-1.ogg" type="audio/ogg"> -->
         <source src="/recordings/o.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>

 </body>
 </html>

and In my app.js file server I added

const RabbitLyrics = require("rabbit-lyrics/dist/rabbit-lyrics");

The audio plays but the lyrics renders as html.

What am I doing wrong?

changing the lyrics element mid-play

When I update the lyrics div html without changing the audio, the lyrics manage to refresh and lyrics highligh works. But scrolling become very weird. Often it jumps back up to the top between lines.

How can I solve it??

const updatePlayer = (lrc) => {
  // update the lyrics display with right lyrics
  $("#lyrics-1").html(lrc);
  // trigger rabbit lyrics
  if ($("#lyrics-1").hasClass("rabbit-lyrics--enabled")) {
    rabbit.parseLyrics();
    rabbit.synchronize();
  } else {
    rabbit = new RabbitLyrics.default({
      element: $("#lyrics-1")[0],
      mediaElement: $("#audio-1")[0],
      viewMode: "mini",
      alignment: "center"
    });
  }
};

Timestamps with hours, and fix vertical/horizontal size of lyrics frame

Greetings, thanks for a wonderful library. never used any plugins for wordpress, but tryed your plugin and it worked immediately perfectly. however, one problem is there (or a few).

I want to use your player for (philosophical) lectures, audiobooks, so they can be longer than 99 minutes Is it supported now (longer than 99 minutes files?)?

Please take a look at what I am doing:
https://harekrishnalectures.000webhostapp.com/%D0%B4%D1%83%D1%88%D0%B0-%D1%87%D0%B0%D1%81%D1%82%D0%B8%D1%86%D0%B0-%D1%81%D0%BE%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D1%8F

Also text is not precisely formatted. The "window" (frame) with text is too small vertically, and at same time it is too large horizontally (overlapping menu on the right) (how to fix it? is it to be done by settings of your plugin, or in wordpress site settings itself?)

Also, I saw on one site similar technology like yours, but there is a feature to click on the text in the transcript (lyrics), and audio position is automatically changed to match time of clicked text position.

Ideally I think size of text vertically should not become scrollable inside small frame. rather, just scrolling the page should be the way of scrolling, IMHO.

Is there a way to make a player wider? (So that scrolling is more precise)

Rabbit Lyric support playlist?

I like Rabbit Lyric but you modify Rabbit Lyric support playlist audio? Thanks

Rabbit Lyrics doesn't see the wrapped media

First thanks for this useful plugin. I've encountered a trouble while applying it. Rabbit Lyrics finds duly media elements when they are naked. But when i wrap audio or video element in any tag such as a <div> it can't see them and so synchronization does not start. How can I overcome this problem?

Add class to container based on status of song

It would be nice if the lyric container will indicate if the player is currently playing a song, is paused, or is finished.

Can I use this with embed youtube as a mediaElement ?

and sync using YouTube Player API player.getCurrentTime()?

Error timestamp with hours [hh:mm:ss.xx]

In release 1.1.0, I see : Support timestamp with hours [hh:mm:ss.xx], like [2:17:53.92].

But It's not work.

Please help me.

My audio http://www.hoasentrenda.org/Audio/AnhTri/Utah-2004.mp3

Thank you very much!

Word transition

Be able to make words active one by one, like karaoke.

How to specify or format for hours

Hi,

How to specify or format for hours?

ex: 23:59:05 => 23 hours 59 minutes 05 seconds

I have an audio which goes until 23 hours. Please suggest.

Some audio goes until 8 hours

The example https://guoyunhe.github.io/rabbit-lyrics/#install shown is about minutes = > 03:27.19

Please advise

Thanks

Translations and Karaoke Combined

I'm trying to provide karaoke style highlights on each translation of my lyrics.

Is this possible?

I tried

<div class="rabbit-lyrics" data-media="#audio-2" data-alignment="center">
    [00:00.00]
    谁のこ[00:01.00]とを考[00:02.00]えてるの?
    da re no [00:01.00]ko to wo ka [00:02.00]n ga e te ru no?
    究竟在想谁的事情呢？
    [00:03.00]
    谁のことを考えてるの?
    da re no ko to wo ka n ga e te ru no?
    究竟在想谁的事情呢？
    [00:06.00]
    谁のことを考えてるの?
    da re no ko to wo ka n ga e te ru no?
    究竟在想谁的事情呢？
</div>

...which doesn't work - as shown in the video below.

rabbit_lyrics_translation_and_karaoke.mov

Support for Changing the Lyrics?

I tried to create a React app using this component; I noticed that on the first load, the component works perfectly. After that, however, even if the same text is supplied to the division, the lyrics display would not work. Is this the expected behavior? If so, is there anyway to modify the code to be able to change the lyrics and rerender using React?

Support SSR?

when I use this package with Nuxt.js (vue.js framework), it throws error as ReferenceError: window is not defined.
is there anyway to use this package on SSR environment?

Feature request: Support standard VTT subtitle files

I would be awesome if your script can support standard VTT files ... having this format as seen below ...

WEBVTT
00:00.000 --> 00:23.600
 Even though it's been so long, my love for you keeps going strong.
00:23.600 --> 00:31.120
 I remember the things that we used to do, a kiss and the ring to the sunshine through.
00:31.120 --> 00:38.320
 I tried to deny it, but I'm still in love with you.
00:38.320 --> 00:42.160
 I miss you like crazy.
00:42.160 --> 00:46.000
 I miss you like crazy.
00:46.000 --> 00:56.720
 Ever since you waited way, every hour of every day, I miss you like crazy.
00:56.720 --> 01:00.400
 I miss you like crazy.
01:00.400 --> 01:08.480
 No matter what I say you do, there's just no getting over you.
01:08.480 --> 01:16.880
 I can see the love shining in your eyes and come to such a sweet surprise.
01:16.880 --> 01:24.240
 If scenes believing it's worth so wait, so hold me and tell me it's not too late.
01:24.240 --> 01:29.360
 We're so good together, we're starting forever now.
01:29.360 --> 01:33.440
 And I miss you like crazy.
01:33.440 --> 01:37.360
 I miss you like crazy.
01:37.360 --> 01:48.320
 Ever since you waited way, every hour of every day, I miss you like crazy.
01:48.320 --> 01:51.760
 I miss you baby.
01:51.760 --> 01:55.200
 I love like ours will never end.
01:55.200 --> 02:05.200
 Just touch me and I'll never get.
02:14.000 --> 02:21.360
 Just one line and we'll never match a feeling like we used to do.
02:21.360 --> 02:30.240
 Hold on tight and put everything on where we're going to make it through.
02:30.240 --> 02:37.600
 If scenes believing it's worth so wait, so hold me and tell me it's not too late.
02:37.600 --> 02:42.640
 We're so good together, we're starting forever now.
02:42.640 --> 02:46.800
 And I miss you like crazy.
02:46.800 --> 02:51.440
 I miss you like crazy.
02:51.440 --> 02:57.440
 No matter what I say you, there's just no getting over you.
02:57.440 --> 03:01.760
 And I miss you baby.
03:01.760 --> 03:05.360
 All the time you don't love your baby.
03:05.360 --> 03:10.800
 When a feeling gets this start, you know the real thing.
03:10.800 --> 03:20.640
 Come along and I'll miss you.
03:20.640 --> 03:23.680
 I miss you like crazy baby.
03:23.680 --> 03:30.800
 All the young sweet love is the same thing.
03:30.800 --> 03:34.480
 I miss you like crazy.
03:34.480 --> 03:41.920
 I love like ours will never end.
03:41.920 --> 03:44.480
 Just touch me and I'll never get.
03:44.480 --> 03:50.720
 Just one line and we'll never match a feeling like we used to do.
03:50.720 --> 04:06.960
 Just one line and we'll never match a feeling like we used to do.

Adjust timing/offset of Lyrics.

I would like to adjust the timing of the lyrics.
Play lyrics earlier/later a so called Offset.

Use case:

The MP3 has a bad cut and long silent intro.
I would like to add CSS animations to the lyrics, but I need the class to appear 0.5s sooner.

I know I could adjust the lyrics. But it would be much much simpler to just add it via JS or data attribute.

<div class="rabbit-lyrics" data-offset="-2000" data-media="#audio-1">

new RabbitLyrics({
    element: document.findElementById('lyrics-1'),
    mediaElement: document.findElementById('audio-1'),
   offset: -2000 // play lyrics 2 seconds earlier.
})

Great project so far!

Feature request for your awesome script

I have used this project for my English Learning Students and it is amazingly helpful. Thanks so much for your time and dedication.

I would like to ask if there is a way for a the text to be highlighted horizontally as the audio progresses on each and every line of the song or audio, so that the user can see the color overlay cover the text as the audio plays from left to right giving a better feedback of which word is being pronounced by the recording.

Thanks

Can not use js to initialize.

Can not use the following code in example:

new RabbitLyrics({
  element: document.findElementById("lyrics-1"),
  mediaElement: document.findElementById("audio-1")
});

The browser console says: Uncaught ReferenceError: RabbitLyrics is not defined.
I'm using the js in dist folder. The compressed code does not have the RabbitLyrics class.

Text goes out of sync when skipping

The plugin works well on short audio files. But I've noticed a problem while using it on long audio files : to fast forward or rewind audio causes synchronization issues. If you don't ever any skipping in timeline this doesn't happen. Is there any way to fix that issue?

Support for amplitude js

I try setting up rabbits lyrics js with my music player it not initializing, my player is power by amplitude js. Do you have functionality for amplitude js audio player

generating timings

Hi, thanks for this great library! I was just curious if you used a tool to generate the timings for your lyrics/subtitle files or you did them manually? I'm looking for a way to automate that if possible. So far I found this: https://github.com/readbeyond/aeneas/.

Webpack library export issue

https://webpack.js.org/guides/author-libraries/

Here are some configuration missing for webpack to generate a valid library.

package.json can have a module property to let webpack import source code instead of compiled bundle.

Also UMD will be useful.

How can I use more than one tag audio on my web html?

<audio style="width:100%; height: 40px" id="audio-4" controls preload="auto">
  <source src="http://www.hoasentrenda.org/Audio/Lyrics/Hoc-cai-su-hien.ogg" type="audio/ogg">
</audio>

If I insert another tag audio below, then I see ID is the same (id="audio-4").

<audio style="width:100%; height: 40px" id="audio-4" controls preload="auto">
  <source src="http://www.hoasentrenda.org/Audio/Lyrics/Roi-sao-nua.ogg" type="audio/ogg">
</audio>

You can write an examples in this case.

Thank you!

Initializing more than one lyrics for one audio/video

First I’m so grateful for this useful plugin. I have a suggestion. It would be nice if we could synchronize the same media element with multiple lyrics at the same time. For instance, playing an audio file with two sets of lyrics in different languages, one a translation of the other. If it is possible, it will be appreciated.

guoyunhe / rabbit-lyrics Goto Github PK

rabbit-lyrics's Introduction

🐇 Rabbit Lyrics 🐇

rabbit-lyrics's People

Contributors

Stargazers

Watchers

Forkers

rabbit-lyrics's Issues

Recommend Projects

Recommend Topics

Recommend Org