Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

How do I create text animation, where text is highlighted and synced with narration?

MikeSpearsMikeSpears Posts: 3New Users
edited April 2011 in iPhone SDK Development
I'm new to iOS development :confused: and have started working on an app that includes a feature that presents a text block along with audio narration. I want to animate the text so that the narration is synced so that the text is highlighted as the audio reads the words. This is common in children books, allowing the reader to follow along visually, word-by-word, with the audio.

I've looked through the Apple documentation and have found nothing helpful.

Any advice is greatly appreciated. Sample code references, even greater.

Thanks.
Post edited by MikeSpears on

Replies

  • Objective ZeroObjective Zero Posts: 1,235Registered Users @ @ @ @
    edited March 2011
    Let me ask you this, do you know exactly when the word will be said. Because if you do, just use a NSTimer after your audio file starts and then do it that way. Otherwise, trying to do speech to text then trying to match it is 100% harder.
    <a href="http://google.com" target="_blank">Questions?</a><br />
    <br />
    Check out my OCR app!<br />
    <a href="http://itunes.apple.com/app/ocr-pro/id486512712?mt=8" target="_blank">http://itunes.apple.com/app/ocr-pro/id486512712?mt=8</a>;
  • MikeSpearsMikeSpears Posts: 3New Users
    edited March 2011
    Thanks for the reply Objective Zero.

    Yes, I do know exactly when the word will be said. And I think I have it figured out how to sync the audio with the text animation.

    What I don't know, is how to implement the text animation. I've looked at the UILabel class and there are no properties or methods that allow me to change the color of a word within the text string. For example, the textColor property applies to the entire string. I need a means of programmatically changing the color of a single word, or a series of words, within the string. I don't see anything in the UITextField or UITextView classes that provides for this either.

    I do believe there is another means of accomplishing this feature. However, it seems to be the long road. I can create the animation by implementing a number of views, where the base is the whole block of text in the normal color, and then animating additional subviews for each word (in the highlight color), and overlaying each word precisely over its corresponding match in the base view.

    However, I'm guessing there must be a more effecient way through the UILabel, UITextField or UITextView classes.
  • mrl72mrl72 Posts: 112Registered Users
    edited March 2011
    I would think that each word on the page needs to be a button with a background color set (ie yellow) and it should be placed behind the label and set the label background color to clear. Then create a timer method that animates the width of the button so that it starts at width zero and grows until it is the same width as the word. You can calculate the width of the label easily enough but you'll need to time it so the label is highlighted to match the audio. I say to make it a button because you probably want the ability to tap on the word and have it repeat the word back to you, which is what I've seen in most children books.
  • MikeSpearsMikeSpears Posts: 3New Users
    edited March 2011
    Very nice approach. Thanks for the help mrl72!
  • Syed SAmi Ul AhbabSyed SAmi Ul Ahbab Posts: 1New Users
    edited April 2011
    hi..
    i am also new on this environment..
    please i also want to do this..could u please provide me a way to achieving this efficiently.
    i also need my app working narration+ audio with some text animation..
    could you share your approach
  • dany_devdany_dev Posts: 4,696Tutorial Authors, Registered Users @ @ @ @ @
    edited April 2011
    First thing you need to know when your word is said by the audio, so you will have an array of values that represent when every single word is said.

    You can use NSTimer to schedule your words highlight, and for highlight text, i would use this approach...
    Color Math | Cocoanetics
  • kazblueskykazbluesky Posts: 165Registered Users
    edited April 2011
    dany_dev wrote: »
    First thing you need to know when your word is said by the audio, so you will have an array of values that represent when every single word is said.

    You can use NSTimer to schedule your words highlight, and for highlight text, i would use this approach...
    Color Math | Cocoanetics

    Dany-Dev

    What code makes the words highlight ? Any idea?

    Also, finding values for the sound position is no problem but linking them up to an NStimer is beyond me (waaaaaay beyond me). Any idea how in code this would be done? I too, like the starter of the thread, have scoured the internet for months trying to find out how to do this and haven't found a way yet.
  • dany_devdany_dev Posts: 4,696Tutorial Authors, Registered Users @ @ @ @ @
    edited April 2011
    assuming that you have an array of integer

    integer: 1000 800 2100 200 2100
    strings: word1 word2 lol for nice

    each number represent after how many time in millisecond must highlight the word.

    So you do a NSTimer with 1000 millisecond (1 second) when fire you highlight word1 and schedule the next NSTimer that will fire 800 ms after and when fire highlight word2, and so on....

    I would create also a desktop software that load mp3 and when I tap spacebar, he record it on a file xml (1 tap for each word), so that i can create easily a transcription timed and import on my iphone app.

    To highlight i would use this class, changing text color, or underline it.
    https://github.com/Cocoanetics/NSAttributedString-Additions-for-HTML
Sign In or Register to comment.