Visualizing Lyrics?

Processing Libraries
1

Hi all!

I’m trying to write a program that displays the lyrics to a song one at a time. Currently, I’ve written the program to display one word at a time and control when each word is displayed using a conditional statement and time with the millis() function.

For example, if the first two words to the song are “Understanding” and “how”, then I write the code like so:

if(millis() < 1700){
  textAlign(CENTER);
  textSize(15+voxSmoothed*10); 
  text("understanding", 400, 750); 
  }
  else if (millis() < 1900){
  textAlign(CENTER);
  textSize(15+voxSmoothed*10); 
  text("how", 400, 750); 
  }

I’d rather not have to write conditional statements like this for all +1,000 words in the song. I thought maybe I could write a for() loop that displays each word automatically when they come in the song, but the trouble is that I think I need to manually control the timestamp of when each word displays so that it goes along properly with the song. I’m unaware of any way to get the program to do this correctly without me giving specific timestamps in milliseconds of when each lyric needs to display to coordinate with the song.

Throwing this one out to you for ideas! I’m hoping I don’t have to write +1,000 conditional statements just to display each word in the song, but I will do it if I have to :crazy_face:

1 Like
2

Don’t rely upon the internal millis though

The song itself has its own millis

see http://code.compartmental.net/minim/audioplayer_method_position.html

How to solve your problem

Now…

You want a text file with the words and their millis when the word starts (so two things in each line of text file), you just gotta read and parse the file. Easy.

How to make the data file

Now, how to make the file? With a separate 2nd sketch.

My idea: I assume you have the song lyric. Copy to an Editor or MS Word and replace every space with enter. Save file. You have one word per line.

The 2nd Sketch loads the song and this text file and plays the song and displays the words from the file consecutively. Every time you click mouse, the current millis (from the song) are stored together with the current word. Done.

  • You must click the mouse immediately before the singer sings this word. Or before saving the data say millisFromMouse=millisFromMouse-450;
  • As soon as you click the mouse, the next word appears.The next mouse click is for the millis of the next word.

Remarks

You could also store the stop millis for each word. I mean, normally the word stops when the next word comes BUT when there is a guitar solo, you want the word to disappear when there’s no singing. Or just after one second or so a word disappears automatically (when no new word follows or when the next word is coming only after the guitar solo, after 5 seconds).

An Editor for the millis

When you need to do a lot of songs, it might be worthwhile to improve this editor for the millis.
You could write the waveform of the songs, the start millis as lines | under it and the words as well. Then you could listen to it and the words are displayed. When you see a mistake, you can drag and drop the single lines | to adjust the millis.
You can move the entire waveform with lines (millis) and word left and right.

I leave the details for you.

Warm regards,

Chrisir

3
4

Great point about using the playhead millis instead of internal millis. I also like your mouse click idea! I wondered about doing something similar to this, but did not think to store the millis values for future reference and adjustment like you mentioned. I think I will give it a try.

Also the Prince music video is a super awesome example. Thanks for sharing Chrisir!

1 Like