guoyunhe / rabbit-lyrics Goto Github PK
View Code? Open in Web Editor NEWJavaScript audio and timed lyrics synchronizer.
Home Page: https://guoyunhe.github.io/rabbit-lyrics/
License: GNU Affero General Public License v3.0
JavaScript audio and timed lyrics synchronizer.
Home Page: https://guoyunhe.github.io/rabbit-lyrics/
License: GNU Affero General Public License v3.0
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
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!
I like Rabbit Lyric but you modify Rabbit Lyric support playlist audio? Thanks
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)
and sync using YouTube Player API player.getCurrentTime()?
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.
<!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?
Be able to make words active one by one, like karaoke.
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"
});
}
};
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?
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
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?
<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!
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?
It would be nice if the lyric container will indicate if the player is currently playing a song, is paused, or is finished.
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.
I would like to adjust the timing of the lyrics.
Play lyrics earlier/later a so called Offset.
Use case:
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!
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?
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/.
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.
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.