Karaoke-like progress highlight for iOS

Question

I would like to implement karaoke-like progress highlight for iOS.

I know I could use NSAttributedString and highlight the text character by character. However, I would like the highlight to progress pixel by pixel, not character by character.

Any ideas?

P.S. No need for sample code, just point me to the right direction.

Here is an example:

Answer 1

I can't think of any automatic way to do that. There would be several problems to solve. It would be pretty hard, I think.

The hardest would probably be figuring out the pixel position of each word so you can pace the coloring to match the timing within the music. With text and attributed layout, you could probably get the text engine to give you the boundaries of each word and then apply the color attribute to each word as it's spoken/sung. You'd have to have data about the time offset for the beginning and end of each word's being sung.

You might have to use Core Text to get layout information about the bounding rectangles of each word.

Once you get that you could build a path (UIBezierPath or CGPath; they're pretty interchangeable) that follows the flow of the text, and then install that path in to a shape layer. You could then make the text transparent, make the shape layer a colored background that shows through, and animate the shape layer's strokeStart and/or strokeEnd properties to make it fill the text. You might need to do it word by word with a short animation that interpolates between one word and the next to get the timing right.