Selected text in iOS (karaoke app)

Question

I am trying to create a karaoke-like application, but I have a problem.

I have a song like mp3 and the corresponding lyrics shown in a UITextView. I want to highlight / emphasize (or something like that) the words that were heard from this mp3 file. I have the appropriate time for each word (startTime, endTime, duration), but I do not know how to select them.

I searched on Stack Overflow, but none of the questions already posted solved my problem.

I saw that a UITextView might not be appropriate for my requirement, but I have no idea what else to use.

I saw something like this presented at WWDC 2011: a demo run of the base animation "Bouncing Ball", but I was not able to implement it.

Please help me find a way to do this.

Answer 1

I found that the easiest way to do this is to use uiwebview, insert html text and underline / highlight it with javascript ... hope this helps everyone who wants to do this :)

Answer 2

As I can see, you have two options:

1. Attributes of the main text

Using the body text, you can emphasize words and apply many other decorations to them. Here is an example of underlining text:

//Create a font CTFontRef sysUIFont = CTFontCreateUIFontForLanguage(kCTFontSystemFontType, 24.0, NULL); //Create a string NSString *aString = @"Random text"; //Choose the color CGColorRef color = [UIColor blueColor].CGColor; //Single underline NSNumber *underline = [NSNumber numberWithInt:kCTUnderlineStyleSingle]; //Pack the attributes into a dictionary NSDictionary *attributesDict = [NSDictionary dictionaryWithObjectsAndKeys: (id)sysUIFont, (id)kCTFontAttributeName, color, (id)kCTForegroundColorAttributeName, underline, (id)kCTUnderlineStyleAttributeName, nil]; //Make the attributed string NSAttributedString *attrString = [[NSAttributedString alloc] initWithString:string attributes:attributesDict]; 

Now this is great for underlining text, but I'm not sure how to animate underlining moving from word to word as the text moves.

---

2. Custom UIView underscore

Now your second option is to create a custom underline class that subclasses UIView. That would be easy to revive. You do not even need to create a separate class for underlining (although I recommend it); you can simply create a UIView and animate it from word to word using animation, as shown below:

 CABasicAnimation *underlineMove = [CABasicAnimation animationWithKeyPath:@"position"]; underlineMove.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; endPosition = CGPointMake((float)nextWord.x, (float)nextWord.y); underlineMove.toValue = [NSValue valueWithCGPoint:endPosition]; underlineMove.duration = currentWord.duration; [underlineView addAnimation:underlineMove forKey:@"animation"]; 

Answer 3

The html + javascript solution is the simplest for me. I wonder why ppl did not give it a thumb, as this is also the solution chosen by the author.