I just started a project that might be useful for your community, especially anyone trying to bring avatars to life with text to speech and animation software:

https://github.com/talkr-app/gif-talkr

It’s a javascript library that animates a GIF file in sync to the text to speech.  It’s free, works in just about any browser, mobile friendly, etc.

Here is a demo:
http://talkrapp.com/gifdemo/example.html

I would appreciate any feedback!

-Doug

That’s really cool Doug. I like it a lot.

Hi Doug, I play with animated characters a lot and wondered if the Speech API fires phonemes/visemes and if this is what you are tapping into ?

It looks great btw. Nice work

After digging around I realised it was a loop : http://i.imgur.com/nIYJ3hf.gif

That still works really well though. When I get some time I will look into it for a character I am working on.

Are there any docs on how to construct the GIFs ?

Thanks again.

Hi, Doug, and welcome to chatbots.org.

Very nice library, and something I think could prove useful, so thank you for sharing. Like Roger, I also work with animated avatars, and will keep this in mind for use with future projects. I’m also interested in any documentation regarding construction of the GIF images.

Please support my voice change experiment,
which is IN PROGRESS as an early attempt,
to change the text to speech to JavaScript.

HOW TO:
It simply loads a random phrase, which is spoken
and animated by “Click Me”. However,  you can
replace that with your own short phrase as well.

Kindly help this experiment with your feedback.
Thank you.

Demo page:
http://chatbot.altervista.org/giftts

Had a play with this and connected her to a bot.

http://elfscript.uk/chattygirl.html

One thing that would be great is an idle animation that plays at times when she is not talking. Or indeed blinking whilst idle too. No idea if this is possible though, all new to me.

The setup was quite easy though once I had a dig around.

Good work

@Roger Davie:

Great idea!

For testing, I just split up the animation and put them in a table on the demo page:  http://chatbot.altervista.org/giftts

It seems that if there is only a male voice synthesis available, then a female avatar will default to that.

I realised there was a link there all the time to how to make the avatars : https://talkrapp.com/

Trouble for me is I don’t have an Apple phone.

Sorry to kick of the thread and disappear, I thought I had notifies turned on for this thread!

In any case, I’m glad to hear that there is some interest in the javascript library.  I spoke with Roger a bit offline about the blinking/idle animations.  Any other feedback is welcome, if possible create a github issue (https://github.com/talkr-app/gif-talkr/issues).  The more interest I can demonstrate in this project the better .

As far as creating new GIF files, even with an iOS device, you can’t make my “special” gif files with the TALKRAPP extension that allows for independent blinks and eyebrows.  You can use the app to create a movie of any picture talking, and from there you can convert the movie into a gif, but the the process isn’t smooth, the animation isn’t as nice as my custom gif files, and the blinks/eyebrows are embedded which means they are too frequent or not frequent enough. 

We’ll have GIF export added in a future version of talkr.  Android support is still a ways off, but these GIF files will work on Android (along with great speech recognition and speech to text).  Until I get the GIF export added to the iOS version, I’m happy to create a custom GIF file for anyone that wants to make a chatbot with something special…just point me to a picture with the mouth closed, looking reasonably straight ahead, and nothing blocking the chin or mouth (hair, hands, etc) and I’ll send you the GIF.

And yeah, the animation is just a loop (no special intel is available about the phonemes or words in the browser), but I was pleasantly surprised how good it looks with the various tricks I employ in the javascript lib.  And portable too!

GIF animations may be made for free in GIMP.
You start out with layers and export as a GIF
animation.  There’s probably lots of other ways.
GIF images with “talking” and “eyes blinking”
animation are common and easy to find.

New Demo: http://chatbot.altervista.org/smiley

The library seems to be working in:

Firefox
Chrome
Galaxy S5
Nexus 5X
Nexus 6P
iPhone 5
iPhone 6
iPhone 6 Plus
iPad
iPad Pro

Are there platforms the library doesn’t work on to your knowledge?

Just to be clear, the library works with any GIF file, like the ones you can make in GIMP.  But the library also detects a special GIF extension that lets you independently control blinks and eyebrows.  If you have a file created with the GIF extension (the ones I posted on imgur are the only ones that exist and it would be tough to create them without writing code like I have done), you can get better quality because the blinks and eyebrows aren’t embedded in the loop and so you can make these gestures more randomly and with the correct frequency.

Doug asked, “Are there platforms the library doesn’t work on to your knowledge?”

The two web browsers I tested were on Linux, not Windows.  And, the devices I tested on were simulators, not physical devices.

Doug - Jul 28, 2017:

Sorry to kick of the thread and disappear, I thought I had notifies turned on for this thread!

Hi, Doug.

Sadly, there seems to be a glitch with email notifications right now. We’re working on it, but as yet we’ve had little success finding the cause, let alone the solution. However, we’re confident that it will be fixed shortly. Till then, the best workaround is to visit the site on a fairly regular basis and see if there are new posts. We’re sorry for the inconvenience.