Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
This demo shows you how to add talking pictures to any [[Twine|http://twinery.org/2]] story. A [[SugarCube|http://www.motoslave.net/sugarcube/2]] macro is used to control text to speech and animate APNG files.
[[Let's get started.|start]]
<<silently>>
<!--
* Below is the talkr SugarCube macro. In this case, it's main job is to pre-load the PNG file so it is ready to talk when we click for the next passage.
-->
<<talkr "https://talkrapp.com/apngdemo/apng/morpheus.png" en male 0>>~<</talkr>>
<!--
* Args:
1: URL of APNG file - Any short APNG file of a talking character will
do, but ones created from talkr GIF files can blink and raise the eyebrows.
2: TTS Locale - Every computer and browser will have different voices
installed, so we identify them by their locale. 'en' will yeild all
english voices. 'en-US' will give you only the American English ones.
3: Gender - use 'true' or 'male' for male, anything else for female.
4: Voice Preference - You can give a voice name here if you want, which will override all other settings if it is installed on the system. An index (in this case 0) will give us the first female english voice, as opposed to the second or third.
* innerHTML:
This will be spoken, not shown. In this case the ~ shows the PNG file. If it wereren't there, you wouldn't see anything, but the file would be downloaded in the backgound (see below).
* repeated use:
The talkr macro will remember the voice associated with the image. So the next time you want to make the image speak, you only need something like (assuming your URL is stored in $f1):
<<talkr $f1>>
Wow, that's convenient!
<</talkr>>
-->
<<remember $f0 to "https://talkrapp.com/apngdemo/apng/talkr_1.png">>
<<remember $f1 to "https://talkrapp.com/apngdemo/apng/dogs_1.png">>
<<remember $f2 to "https://talkrapp.com/apngdemo/apng/monalisa_1.png">>
<<remember $f3 to "https://talkrapp.com/apngdemo/apng/blahblah.png">>
<<remember $f4 to "https://talkrapp.com/apngdemo/apng/girlsGeneration.png">>
<<remember $m0 to "https://talkrapp.com/apngdemo/apng/morpheus.png">>
<<remember $m1 to "https://talkrapp.com/apngdemo/apng/01Washington.png">>
<<remember $m2 to "https://talkrapp.com/apngdemo/apng/teddy_1.png">>
<-- Start downloding these, but don't show them -->
<<talkr $f0 en female 0>><</talkr>>
<<talkr $f1 en female 1>><</talkr>>
<<talkr $m1 en male 1>><</talkr>>
<</silently>>
<<talkr $m0 en male 0>>
I'm sure you have a lot of questions. There is a lot to process.
<</talkr>>
<<silently>>
<<talkr $f0 en female 0>><</talkr>>
<<talkr $f1 en female 1>><</talkr>>
<<talkr $f2 en female 2>><</talkr>>
<<talkr $m1 en male 1>><</talkr>>
<<talkr $m2 en male 2>><</talkr>>
<</silently>>
[[What is Talkr?|Talkr]]
[[How do the APNG files work?|APNG]]
[[How does TTS work?|TTS]]
[[Where do I get the macro?|SugarCube Macro]]
<<talkr $f2 en female 1>>Talker is an app for your eye phone. It makes any picture talk. You can use it on people or pets, even paintings and drawings.
<</talkr>>
[[How do I make my create my own APNG files?|APNG]]
[[talkr website|https://talkrapp.com]]
<<talkr $f3 en female 3>><</talkr>>
<<talkr $f1 en female 1>>
Here you can download the macro. It is still in development, so expect some bugs. We need your help to figure out how everything should work, so if you have any ideas on how to improve the integration, please get in touch.
<</talkr>>
[[Download|https://talkrapp.com/apngdemo/talkr-sugarcube.min.js]] the macro and add it to your story Javascript. For development, check out the [[unminified version|https://talkrapp.com/apngdemo/talkr-sugarcube.js]] and the [[talkr-tts|https://github.com/talkr-app/talkr-tts]] and [[talkr-apng|https://github.com/talkr-app/talkr-apng]] repos. Also, try loading this HTML file in Twine to inspect the comments.
[[Go Back|start]]
<<talkr $m1 en male 1>>
Talker can export giff files. These are then converted to PNG with a shell script. Talker is free, but you will need to buy the premium version for three bucks to export giff files. Yes, we know this process is a bit involved. We are working on making it easier.
<</talkr>>
The [[Shell script|https://github.com/talkr-app/talkr-apng/blob/master/talkr-gif-conversion/convert.sh]] requires [[apngasm|https://sourceforge.net/projects/apngasm]] and [[ImageMagick|http://www.imagemagick.org/script/index.php]]
[[Find out more|start]]<<talkr $f3 en female 3>>
Any picture with a talking face will work. It doesn't have to come from talker. But You have to find the right file.
<</talkr>>
[[Another Example]]
<<talkr $f4 en female 4>><</talkr>><<talkr $f4 en female 4>>
Avoid large head movements. For best results, make sure the mouth is closed on the first frame.
<</talkr>>
[[Back to the Start|start]]
<<talkr $f0 en female 0>>
You can use two kinds of PNG files. Regular files you find on the internet, Or files created by talker. They work a bit differently, but in both cases, the webserver needs to be configured to allow you to access the files. Or you can download them locally.
<</talkr>>
[[Regular APNG files|NonTalkr APNG]]
[[Talkr APNGs|Create APNG]]
<<talkr $f3 en female 3>><</talkr>>
<<talkr $m2 en male 2>><</talkr>><<talkr $m2 en male 1>>
Text to speech works on almost all modern browsers, but each browser can have different voices. Eye phones require that you click on something before text to speech is played.
<</talkr>>
[[Do other languages work?|Chinese]]
<<talkr $m2>><</talkr>><<talkr $m2 zh>>
中文是没有问题的。你说什么语言？
<</talkr>>
[[Back to the start|start]]