Fun with SpeechKit - WordRun: Speech recognition gamified

Sun, Dec 4, 2016

Speaking (Pronunciation) practice game for iOS using Speech api.

Why?

With a little research, i couldn’t find enough tools for speaking. Pronunciation especially. Thinking lack of a speaking-practicing app with the brand new iOS 10 voice recognition api, i thought it might make a small but useful and also amusing game. I call it WordRun.

The name contains run, because it’s like an endless running game. You see the word on screen and pronunciate it properly. It’s no big deal for a native speaker but can be tricky for foreigners. If you say the word correctly, game continues endlessly. If you fail, you loose one life. You have 3 lives and then you die.

How?

Since this is a tiny weekend project, core is only consist of recognizing a given word by Speech api.

init endless run: grant required permissions to use microphone and speech api. create SFSpeechRecognizer and AVAudioEngine.
create a SFSpeechAudioBufferRecognitionRequest for a given word with shouldReportPartialResults set to true and contextualStrings to narrow down the focus on word.
check if result returned from Speech api is equeal to the word given. If so, user pronunciated the word correctly, move on the next word and goto step 1.

I have a plan using text-to-speech for wrong pronunciations, and make user learn the correct one. Bu it seems like so many people are having problems with running AVSpeechSynthesizer in iOS 10, including me unfortunately.

Also i created controllers for each domain. Like SpeechController. Just to create skinny view controllers. In mvc design pattern, you better have as little code as possible in view controller, not to repeat yourself. Anc in iOS, it’s a very common mistake to create fat view-controllers, which is called Massive view controller.

Scroll Segue

class SegueFromLeft: UIStoryboardSegue
{
    override func perform()
    {
        let src = self.source
        let dst = self.destination
        
        src.view.superview?.insertSubview(dst.view, aboveSubview: src.view)
        dst.view.transform = CGAffineTransform(translationX: src.view.frame.size.width, y: 0)
        
        UIView.animate(withDuration: 0.40,
                       delay: 0.0,
                       options: UIViewAnimationOptions.transitionFlipFromLeft,
                       animations: {
                            dst.view.transform = CGAffineTransform(translationX: 0, y: 0)
                       }) { finished in
                            src.present(dst, animated: false, completion: nil)
                       }
        
        UIView.animate(withDuration: 0.40,
                       delay: 0.0,
                       options: UIViewAnimationOptions.transitionFlipFromRight,
                       animations: {
                            src.view.transform = CGAffineTransform(translationX: -src.view.frame.width, y: 0)
                       },
                       completion: nil)
    }
}

Polishing

iOS 10 setup screen is consist of text only. So, this is an increasing trend in design. Clear and open interface with intents are driven by typography.

Only polish WordRun has is animations.

Slide animation
Shake animation
Explode animation

While moving to next word, it slides from the right side of the screen. And it’s done by CATransition. If the pronunciation was wrong, then the word on the screen shakes with CAKeyframeAnimation. And user looses a live, so the heart icon should explore and fall into pieces. With the help of cool UIViewXXYBoom library.

Get the app

I’ll send the app to AppStore as soon as possible.

Get the code

Code is in my repo. You can check it out.

yortuc