How should I time highlighting of text with audio for a karaoke like application on iPhone?

Question

Say for example I had an application that would show chunks of lyrics, 3 or 4 lines at a time. Now, I want to trigger an audio file to start playing, and then time the highlighting of the lyrics with the audio itself. Kind of like the bouncing ball that bounces from one word to another.

The only thing I can think of is that I will need to create metadata to go along with each audio file, so that I can start a timer that runs alongside the audio file. Or perhaps the audio player in iOS can expose its own running timer and I could trigger the highlighted word to change at certain points?

Any idea the best way to do this? I would think that it could be taxing on the processor if I had to check every second if the word should change, but I don't know how I could trigger it otherwise.

Answer 1

Not the best answer I know, but a very similar solution was discussed in one of the WWDC 2011 videos using Core Animation.

Find the video named Core Animation Essentials (should be video 421 on iTunes U for WWDC 2011). The example should be around minute 29. Basically the scenario was that there was a ball bouncing over lyrics that was being played to a song. The project talks about how to animate to the timing and position over the words using an interesting idea...

Although it would take a little bit to design, implement a project with an NSTimer and your song starting at the same time. Implement the project so every time you press on the screen, an offset from the last time interval is inserted into an NSMutableSArray, which is then written to a file. Now, run the project and make timestamps for the words by pressing down when each word is sung. (This assumes that you already know what songs you are going to implement beforehand and the singing speed is not too intense). Ok... now you have your metadata.

I would recommend trying the bouncing ball thing first because the implementation is already described as well I see a couple of problems with what you are trying to implement. Most notably, (I might be mistaken), but I don't think UIlabel/NSString has any methods to highlight substrings. Meaning you might have to make a label for each individual word which could get really tedious... So check out that video and hopefully you can get something out of that. Good Luck!