How Can I make real Time lyrics connected with mp3 music?

Question

I need to connect the lyrics with the vocals of the songs in real-time when the user is listening to the song kinda like in karaoke. When the vocals are being sung, the part of the lyrics should glow or change its size or color, I mean, just differentiate it from the rest. And they should be connected with music player so if user skips music they should also skip too with the player. Can I make something like that, with like, javascript? What do you suggest? How can I make it?

Answer 1

Yes, you could make what you're talking about using HTML and JavaScript.

My development plan would be:
1. Create a collection of a few pairs of mp3 and corresponding timed lyric data. One or 2 songs with corresponding lyrics should be enough to test the code.
2. Create a simple web application that uses HTML and JavaScript to let a user play an mp3 with the timed lyric data showing in a div as the music plays.
3. Test that it shows at the appropriate times.
4. Improve by showing text in a special way when the LRC data is time-stamping single characters or single words of lyrics in rapid succession. This could achieve the effect you want where multiple words are shown at the same time but the latest word or character is highlighted as it is pronounced by a singer.

The timed lyric data could be in LRC or webvtt( https://w3c.github.io/webvtt/ ) format. Both are very popular which should make it easier to find data for lots of music or tools to autogenerate it.

LRC is a text file format that pairs times from the beginning of the audio with lyrics. The format is simple enough to explain itself if you just open an LRC file in a text editor.

I had trouble finding LRC data with corresponding MP3 but you could get started with your web application by manually creating the timed lyric data for songs you currently have.

This could help you convert an mp3 with lyrics to LRC:
https://www.lrcgenerator.com/
It might use some speech recognition.

Many LRC files are at:
https://www.megalobiz.com/lrc/maker/download-music-lyrics-lrc-generated-files
That's useful for seeing examples of the LRC file format but I didn't find the corresponding mp3 files.

It looks like the LRC data can be included directly in an MP3 based on this question:
https://www.quora.com/How-do-I-save-an-*-LRC-file-into-an-*-MP3-file
This means you may be able to programmatically pull LRC data out of some mp3 files.

Check this related project: https://j.hn/lab/html5karaoke/
It has synchronized audio and text highlighting

Answer 2

Josh Greig Sounds like a lot of fun. By the way, how many characters long is your answer?lol

Answer 3

With timeupdate event of audio element, to monitor changing of the element playback time, progessively load time segment of song lyrics using Lyricer.js.
https://code.sololearn.com/WBf5zovmh1he/?ref=app

Answer 4

I reached the length limit and had to trim some of the wording to fit.

Good luck with your project, Kevin.

Answer 5

Thanks Josh kreig

Answer 6

I dont really think its posible due to some ppl creating html dont have internet connection and using javascript its possible but you need a domain and a server