TickTock - An Interaktiv Clock built in Saola Animate

With many students now learning remotely, I’ve been building some free on-line resources for various family & friends who are teachers - but anyone can use them.

TickTock was first built over ten years ago as a Window’s application to help teach time to kids - but I struggled to adapted it to an on-line version until now. Saola Animate made it possible.


It’s simple to use and should work on both current desktop and tablet (tested on latest iPadOS 13) browsers.

Just click or tap either clock hand to activate - then move the mouse or drag your finger around the clock face. Then click or tap again to deactivate the hand. The clock will then speak the time.


Hi mackavi,

Thanks for sharing the resource, I really like it. I am just wondering how do you generate the sound for a selected time. I guess you used browser’s text to speech API?


Yes, it uses the browser’s TTS.

When I rebuilt my first main application in Saola (Built with Saola), I tried using audio files - but kept getting a slight delay between the interaction on the tiles and the playback of audio. Also the basic 100 square has a corresponding number if audio files. I’ve since updated that project to use TTS as well which means you get speech for even larger numbers.

The original clock application also had .mp3 audio speech but I had been looking at TTS after reading one of the Active Presenter posts.

The default speech in the desktop browsers was not great but I discovered that Chrome (and iPad) provides access to much higher quality voices and was very impressed by the pronunciation of the UK voices that I decided to try TTS.

Both Plethos and TickTock use the same functions. They first check a querystring value that allows the teacher /student to specify a voice (if available)*1:


If not, they then try and use the default Male Chrome voice and if that fails, they look for the first en-GB voice.

If all that fails, it then picks the first voice in the browser’s available voice list.

Ideally, these projects will have some simple voice panel that will allow the user to change voice / pitch / rate on screen.

Also, by using TTS, I want to see if these or future projects can be made multilingual.

*1 the link will change TickTock’s default voice to Google’s UK Female if that voice is available on your system.


You know…I just realize you brought up something amazing…
What if Saola animate have a speak(“Hello World”); action built right into Saola that uses the browsers ability anyway.

Nice clock by the way :smiley:

1 Like