< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Loading Scripts From Text

In this sample, you may use the loadScriptFromText function to let your avatar say input texts in real-time. You can simply type in, or paste text into the text area. You can then experience the dynamic converting to speech by selecting different radio buttons with specific behaviors.

Please note:
To turn text into live, animated messages you will need to acquire the Text to Animated Messaging Service (TAMS) in order to get full access to the conversion work.

Using the loadScriptFromText Function
Please type text here, and press Say button to playback the conversion result.
Voice:	Voice Speed & Pitch:	Auto Motion Style:
US English Female	Default Speed & Default Pitch	Female Broadcast
UK English Female	Faster Speed & Higher Pitch	Female Service
	Slower Speed & Lower Pitch	Female Explain

Controls Behaviors

This sample contains 1 text area, 3 parameters and 1 button, their behaviors are:

Type-in/paste any text to convert into the text area.
Choose different TTS voice. Select US English Female for US English Female voice, and UK English Female for UK English Female voice.
Set the speed and pitch of the voice. Select Default Speed & Default Pitch for general talking, Faster Speed & Higher Pitch for faster speed and higher pitch, and Slower Speed & Lower Pitch for slower speed and lower pitch.
Choose auto motion style. Select Female Broadcast for using the Broadcast_F auto motion, Female Service for using the Service_F auto motion, and Female Explain for using the Explain_F auto motion.
Click Say button to convert the input text using the above specify parameters.
Please view the source code here.

Sample Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="http://ctinteractive.reallusion.com/ctinteractive/1.1/CTWebPlayer.min.js"></script>
<script type="text/javascript">
    var player = new CTWebPlayer();
    $(function () {
        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
    
        player.init($("#unityPlayer"), function () {
            player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode5/Scripts.uctmodel", {
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode5/Affirmative.uctidle"
            });
        });
    });
    
    function Say() {
    var str = $('input[name=speed]:checked').val();
        player.loadScriptFromText( $("#text").val(), {
            ttsVoice: $('input[name=voice]:checked').val(),
            ttsSpeed: $('input[name=speed]:checked').val().split(",")[0],
            ttsPitch: $('input[name=speed]:checked').val().split(",")[1],
            automotion: $('input[name=automotion]:checked').val(),
            playAfter: 0,
            loaded: function( status, dat, info ) {
                console.log( "out:" + info.message );
            }
        });
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions:
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web and loads a default actor (Scripts.uctModel) with an assigned idle motion (CTDefWebPreview.uctidle) once your page is opened. This function is a must because you need to have an actor before loading a dynamic script to it.
- function Say(): This function loads a script using the input text and specify parameters and plays the script instantly.
The adjustable codes in the functions:
$(function ()
- Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
  https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d
- player.loadActor(){...}: For more information about the modification method to the function loading a default actor, please refer to the Loading Actors section.

function Say

Replace the $("#text").val() with the text you want to say.
ttsVoice: This value determines the different TTS voice. A list of available languages and voices can be found in CT API Reference Guide.
ttsSpeed: This value determines the speed of the output voice. Possible value are from -5(slower) to 5(faster), 0 is the default speed.
ttsPitch: This value determines the pitch of the output voice. Possible value are from -100(lower) to 100(higher), 0 is the default pitch.
automotion: This value determines the auto-motion of the speech. You may apply different animation styles to match the attitude of your voice to your character. A list of auto-motion style can be found in CT API Reference Guide.
playAfter: This value determines the seconds for the player to wait before starting play the converted script. A negative number means never to play back.
loaded: function (status, data, info) {}: If you want to execute more commands, functions or methods after the script is loaded, then add them into this function in-between the curly brackets. They will instantly be executed after the script is loaded.
In this case, the console panel will display the message return from server.

<textarea id="text" style="width: 640px; height: 120px; resize: none;">Please type text here, and press Say button to playback the conversion result.</textarea>

<input id="voice1" type="radio" name="voice" value="usenglishfemale" checked/><label for="voice1">usenglishfemale</label>
<input id="voice2" type="radio" name="voice" value="ukenglishfemale" /><label for="voice2">ukenglishfemale</label>

<input id="speed1" type="radio" name="speed" value="0,0" checked/><label for="speed1">Speed(default) Pitch(default)</label>
<input id="speed2" type="radio" name="speed" value="2,30" /><label for="speed2">Speed(faster) Pitch(higher)</label>
<input id="speed3" type="radio" name="speed" value="-2,-30" /><label for="speed3">Speed(slower) Pitch(lower)</label>

<input id="motion1" type="radio" name="automotion" value="Broadcast_F" checked/><label for="motion1">Female Broadcast</label>
<input id="motion2" type="radio" name="automotion" value="Service_F" /><label for="motion2">Female Service</label>
<input id="motion3" type="radio" name="automotion" value="Explain_F" /><label for="motion3">Female Explain</label>

<input type="button" value="Say" onclick="Say()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.

Controls for Loading Script From Text

Copy the <textarea.../> lines to the positions where you want to embed the text area in-between the <body> and </body> tags of your custom web page.
Copy the <input type="radio".../> lines to the positions where you want to embed the radio control in-between the <body> and </body> tags of your custom web page.
Copy the <input type="button".../> lines to the positions where you want to embed the buttons in-between the <body> and </body> tags of your custom web page.