gamequiz


GMS_HTML5_TTS
 

 
Data : 2021-10-28
 
Add spoken text to your HTML5 project in GameMakerStudio
Aggiungi del testo parlato al tuo progetto HMTL5 in GameMakerStudio


GMS_HTML5_TTS is a free   file.gmz   for GameMakerStudio ( 1.4 o 2 ) with HTML5 module, to add spoken text to your HTML5 project.


GMS_HTML5_TTS uses the vocal synthesis through the voices installed by default on your PC or related to the browser you are using.
Online you will have more voices available than when you are offline, also depending on the browser used.
Voices can have different accents for different languages or countries.

To make a voice say ' Hello World ', this simple code will suffice :
scr_TTS_Play ( ' Hello World ' , false );


CREDIT :

GMS_HTML5_TTS it was created thanks to the open source javascript code for TTS text to speech synthesis found on the Microsoft website : link ( no longer available ).
You are free to modify the TTS.js file but remember that you must always leave the original authors of the code mentioned :



That code has been modified and adapted by me to use it on
GameMakerStudio 1.4 / 2 and its html5 module.

If you want to support GMS_HTML5_TTS ( not mandatory ), add this page url and or parrot icon to your project in GameMakerStudio :


DOWNLOAD :

Download GMS_HTML5_TTS.gmz   Version 2 of 27/10/2021 (about 107 kb)
and import it into a new project in GameMakerStudio.





Once you have imported GMS_HTML5_TTS.gmz, on GameMakerStudio, you will find its scripts, the obj_TTS_Control object, some sprites and the Extensions folder.
By clicking on it, you will open its properties dialog.
Here you will find the TTS.js file.   Click on it to open its dialogue with all its functions. Finally, click on a function to open its dialogue with related information :




TEST version 2 :

GMS_HTML5_TTS has been tested :
  positively on Windows10 with these browsers :
  •   Edge version 94.0.992.50 ( Build ufficiale ) ( 64 bit );
  •   Chrome version 95.0.4638.54 (Build ufficiale) (a 32 bit);
  •   Firefox version 93.0 (32 bit);
  •   Opera version 80.0.4170.63;
  •   OperaGX version LVL 3 (core: 80.0.4170.61);
  •   Vivaldi version 4.3.2439.63 (Stable channel) (a 64 bit);


  Android :
  •   Chrome version ( 93.0.4577.82 );
    Available only the default voice in the device language (number 0).
    Play, Stop, Rate, Pitch, Volume work;
    The pause works but it cannot be resumed;
    Despite seeing the numerous items available, (in my case 53 online) through the Search, Select, Buttons, etc. scripts, in reality I was unable to set an alternative to the default one which is number 0   ( I hope to fix this bug in the next version ).


The Scripts :

GMS_HTML5_TTS as well as the Extension, is also composed of Scripts to more easily call the various functions .
Each of them begins with the words "scr_TTS_".
Actually you could use functions directly instead of Scripts, but bearing in mind that a developer could test their game
(in GameMakerStudio ) not only for the HTML5 form, but also using other platforms (Windows, Andorid, etc ...).   This could cause errors, as the functions present in the TTS.js file were created only for the HTML5 module.
For this reason the various Scripts contain the functions of TTS.js, enclosed within a code, which allows their use only :
  1. in a browser;
  2. in a browser compatible with text-to-speech;
  3. in a browser that has at least one voice available;

Code :
if ( os_browser != browser_not_a_browser) { /* Code for browser only */

if (( TTS_Info_Voice_Work == true ) && ( TTS_Total_Number_Voice > 0 )) {
/* Browser code compatible and with at least one available item */
1° script

Ini

scr_TTS_Ini ( );
This first script will need to be called in the Create of the first game object.
It will initialize all the variables useful for the functioning of the text-to-speech,
then it will find all the voices available at that moment and their names.

The main variables of GMS_HTML5_TTS are contained in this script :
TTS_Info_Voice_Work         = false;   /*  if TTS.js works in the browser   */
TTS_Total_Number_Voice   = 0;        /*   the total of available items   */
TTS_Voice_Selected             = 0;        /*   number of the selected voice   */
TTS_Volume                         = 1;        /*   volume from 0 to 1   */
TTS_Rate                              = 0.8;     /*   reading speed   from 0 to ? */ TTS_Pitch                             = 1;       /*   reading tone   from 0 to 2 */

To the TTS_Info_Voice_Work variable, through the TTS_Get_Voice_Work () function; will be assigned true or false ( depending on whether the browser is enabled for speech synthesis or not ).  If it returns true, the voices will be heard.
TTS_Info_Voice_Work = TTS_Get_Voice_Work ( );


To the TTS_Total_Number_Voice variable, through the TTS_Get_Total_Number_Voice (); function the total number of voices will be assigned.
Usually offline, the most common browsers have 4 or more voices.
When online, however, there may be many more voices.
Each voice is numbered starting from the first which corresponds to the number 0;
This number for the same voice may vary from online to offline, from browser to browser and from country to country :

TTS_Total_Number_Voice = real ( TTS_Get_Total_Number_Voice ( ) );


For each voice found, the TTS_Voice_Name[ ] variables ( arrays ) will be created.
In addition to being numbered, the voices also have their own names.
Then through the function TTS_Get_Voice_Name ( ); we assign the name of the related voice to these variables :
    for ( i = 0; iTTS_Total_Number_Voice ; i ++ ; ) {

        TTS_Voice_Name[ i ]   =   TTS_Get_Voice_Name ( i );
}
The name of an voices might contain :
  • the name of the creator / owner ( Microsoft, Google, etc ... ) ;
  • a personal name ( masculine or feminine ) ;
  • the language ;
  • the nation ;
Here is a possible result :
TTS_Voice_Name[ 0 ] = " Microsoft Cosimo - Italian ( Italy )";
2° script

Search

scr_TTS_Search ( false , ' Italian ' , 'Italiano' );
If you have a text written in English it is best to have it heard by an English voice.
Through this script you can search for an voice that corresponds to the language of the OS or a specific voice that has the first or second word entered in its name. Then set the TTS_Voice_Selected variable with the number related to that voice.

argument0   =   if set to true, the language of the OS or browser will be searched first and then a check is made to see if an entry is available for that language;
The first search will be performed with the term of Edge;
If it doesn't find it, it searches again but with the Chrome term;
If it still does not find anything then it will search for the word of argumen1;
If it finds nothing again then it will search for the word of argument2;
The search via OS is deliberately limited to only a few main languages present on both Chrome online and Edge online :
Nation ** Term Edge online Term Chrome online
German de-DE German Deutsch
Italy it-IT Italian italiano
Poland pl-PL Polish polski
Indonesia id-ID Indonesian Bahasa
Japan ja-JP Japanese 日本語
Korea ko-KR Korean 한국의
Netherlands nl-NL Dutch Netherlands
India hi-IN Hindi हिन्दी
United Kingdom en-GB English (United Kingdom) UK English
United States en-US English (United States) US English
France fr-FR French français
Brazil pt-BR Portuguese (Brazil) português do Brasil
Russia ru-RU Russian (Russia) русский
Spain es-ES Spanish (Spain) espaňol
Mexico es-MX Spanish (Mexico) espaňol de Estados Unidos
Chinese HK zh-HK Chinese (Hong Kong) 粤語(香港)
Chinese CN zh-CN Chinese (Mainland) 普通话(中国大陆)
Chinese TW zh-TW Chinese (Taiwan) 國語(臺灣)
You can find more names here
Download new voices

argument1   =   word to search for in item names ;
argument2   =   if the first word is not found, this second word will be searched.

Keep in mind that if you search for the voice 'Japanese' on Edge you will only need to search for this word in English, while for Chrome (which shows some names with Japanese, Chinese, Korean symbols and characters, etc ... ), you should look for: '日本語' ;
Also consider that a voice on the various browsers may not correspond to the same number;

Search examples :
  • Search for a voice based on the language of the OS only :
    scr_TTS_Search ( true , ' ', ' ' );
  • Search for an voice based on the OS language, otherwise the entry containing word1 or word2 :
    scr_TTS_Search ( true , 'English ( United States )', 'English Female' );
  • Search for a voice that contains word1 otherwise word2 :
    scr_TTS_Search ( false , ' Italian ', 'Italiano' );
  • Search for a voice that contains word1 otherwise symbols or idioms :
    scr_TTS_Search ( false , ' Japanese ', '日本語' );
However, it is likely that in some browsers there is not an voice with that specific word and therefore it will be set by default with the number zero ( whatever voice it is ) :   TTS_Voice_Selected = 0;



Demo :  Search.html
3° script

Play

scr_TTS_Play ( ' Hello World ', false );
Plays text with a certain voice;
Multiple voices cannot be heard at the same time.

argument0 = string with the text;
argument1 = stop the previous voice( true o false ) .

In GameMakerStudio you can use the hashtag # to wrap the text.
However, it could also be read by a voice.
To avoid this, we remove unwanted symbols using this code:
argument0 = string_replace_all ( argument0 , ' # ' , ' ' ); // remove_hashtag
argument0 = string_replace_all ( argument0 , ' _ ' , ' ' ); // remove _
argument0 = string_replace_all ( argument0 , ' ‹ ' , ' ' ); // remove ‹
argument0 = string_replace_all ( argument0 , ' › ' , ' ' ); // remove ›


This script calls the function TTS_Play present in the TTS.js file.

TTS_Play ( numero , ' text ' , volume , rate , pitch );
  • argument0   =   voice number   /* TTS_Voice_Selected */
  • argument1   =   text in a string ;
  • argument2   =   volume from 0 to 1 ;   /* TTS_Volume */
  • argument3   =   rate from 0 to ? ;   /* TTS_Rate */
  • argument4   =   pitch from 0 to 2 ;   /* TTS_Pitch */
4° script

Pause

scr_TTS_Pause ( true );

argument0 = true    : will pause the voice;
argument0 = false   : will resume the voice from the pause point;

This script calls   TTS_Pause ( true );   function present in the TTS.js file.
5° script

Stop

scr_TTS_Stop ( );
Stop, delete the voice;

This script calls the   TTS_Stop ( );   function present in the TTS.js file.

Demo Play, Pause e Stop

6° script

Speaking

scr_TTS_Speaking ( );
Check if the voice is playing at that moment.
If true returns, the voice is playing;
If false returns, the voice is not playing;

For example, I used this feature in a game to make a character's mouth animate just when his voice could be heard :
var speech = scr_TTS_Speaking ( );
if   ( speech == true ) {
                                      image_single = -1;
                                      image_speed = clamp ( TTS_Rate, 0, 1 );

                                      } else { image_single = 0;   image_speed = 0;   }
This script calls the   TTS_Speaking ( );   function present in the TTS.js file.
Demo :  Speaking.html
8° script

Voice Select

Create a select, with all voices, as selectable options.
It will be external to the canvas and will use the browser font.
For use in the GameMakerStudio STEP event.
scr_TTS_Voice_Select ( 10 , 32 );
argument0 = position x;
argument1 = position y ;



This script calls   TTS_SelectVoice ( arg0, arg1 );   function present in the TTS.js file.
It will set the variable TTS_Voice_Selected with the number of the selected item.
9° script

Voice Button

Add one, more, or all of the clickable buttons, with the names of the voices.
It is possible to use this script several times ( for example to create several buttons in different positions ).
It will be external to the canvas and will use the browser font.
For use in the GameMakerStudio STEP event.
scr_TTS_Voice_Button ( 70 , 20 , 2 );
argument0 = position x;
argument1 = position y ;
argument2 = number of voice;
argument2 = TTS_Voice_Selected ;     ( number of the selected voice ) .
argument2 = 10000 ;     create a button for each voice present ;



This script calls   TTS_ButtonsVoices ( arg0, arg1, arg2 );   function present in the TTS.js file.
7° script

Voice List

Draw a scrollable list with all the voices names. Depending on the number of voices present, it may resize the height of the page.html .
It will be external to the canvas and will use the browser font.
For use in the GameMakerStudio DRAW event .
scr_TTS_Voice_List ( 10 , 40 , true );
argument0 = position x;
argument1 = position y ;
argument2 = true; ( visible text )   false; ( text not visible )

Result from offline browser, both on Edge, Opera and Chrome (7 Microsoft voices):


Result from online Edge browser ( 76 voices )   e   from Chrome online (26 voices):

As you can see some voices names in the Chrome browser, they report characters that may not be present in the font of your project.
In this case, however, the browser's default font will be used, which in theory already contains all those symbols.
When you are online this list could resize the page.html, especially in height;


This script calls   TTS_DrawInfoVoice ( arg0 , arg1 , arg2 );   function present in the TTS.js file.

Font Voice List

draw_text ( x, y, TTS_Voice_Selected );
Drawing the name of a voice inside the canvas implies the use of a GameMakerStudio font and no longer that of the browser. This could create graphic problems if you were to draw the name of a voice with characters / symbols / idioms ( for Chinese, Japanese, Korean, Arabic, etc ... ) as happens on Chrome, which may not be present in your font.

To overcome this we use my sprite as a font, which contains in addition to all the letters and numbers, also some characters / idioms, necessary for the Chrome browser.
However, this does not ensure a 100% perfect result in the various browsers.
In fact, further characters / idioms not present in it, will be invisible :
"Google ไทย" = "Google "
" عربي" = " "



Report this code in the create of the obj_TTS_Control, to create the font :
/// font by sprite
my_TTS_Font = font_add_sprite_ext ( spr_GMS_HTML5_TTS_Font ," ():'´_-­^¨0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏ
ÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿĀ한국의日本語國語臺灣粤語香港普通话中国大陆рускийहद"
, false,-8);

Report this code in the scr_TTS_Font_Voice_List script :
draw_set_font ( my_TTS_Font );

Finally add in the room_end event, the following code to destroy the font:
font_delete ( my_TTS_Font );


Using this script ( to be inserted in the GameMakerStudio Draw event ), we will then draw inside the canvas, using my sprite as a font :
scr_TTS_Font_Voice_List ( x , y , 0 );
argument0 = position x;
argument1 = position y ;

argument2 = number of the voice to be drawn;
argument2 = TTS_Voice_Selected ;     ( number of the selected voice ) .
argument2 = 10000 ;     All the voices present will be drawn ( scrollable list from top to bottom, changing the position y ) ;

It is possible to use this script several times ( for example to report names in different positions ).

Flag

We create flags so that the user can select the desired voice.
If a voice for that country is not available, or its argument is set to false , its flag will not be created.
scr_TTS_Flag( true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, true );
The number of selectable flags is 15 Nations :
   argument0 = United Kingdom;
   argument1 = United States;
   argument2 = Italy;
   argument3 = Spain;
   argument4 = France;
   argument5 = German;
   argument6 = Russia;
   argument7 = Brazil;
   argument8 = Japan;
   argument9 = Korean;
   argument10 = Chine;
   argument11 = Hindi;
   argument12 = Pol;
   argument13 = Indonesian;
   argument14 = Netherlands;


Demo :  Flag.html
Known bug
Depending on the browser language, you receive names of different countries.
For example on firefox (set to English) the country name "United Kingdom" could also match "Great Britain" .
The consequence is that the English flag does not appear.
Therefore, for the English flag to be created, add this line of code
at number 38 in the script   scr_TTS_Flag :



Or replace the entire script with this new version 2.1:   Flag

Other

Demo Insert Your Name

Have a voice say a player's name after they have typed it in at the beginning of a game.

Game with

GMS_HTML5_TTS

Here is a list of my HTML5 games using GMS_HTML5_TTS :

Other TTS by MarketPlace

There are other TTS in the yoyogames Marketplace :
  1. For Windows : Text To Speech Complete ( by Ericbomb )
  2. For Windows : Text To Speech ( by Lonewolff )
  3. For Android : TTS Android Basic ( by Roadhammer Gaming )

Old version

GMS_HTML5_TTS v1

GMS_HTML5_TTS v1 ( Text to speech ) is the first version missing various functions such as: 'stop', 'pause' and more and there are compatibility with the Firefox browser which does not synchronize well the passage from one message to another.
Demo 1° version :  link

 

 

 
AFFILIATI :
 

GAMES and PROGRAMS  FREE

  VIDEOGIOCHI e PROGRAMMI

 
 HTML5   IMG   Genere 
 Ufonoid  arkanoid 
 Bepi  quiz 
 GMS_SimpleParticleEffects  UTILITY 
 Dj Mini Mix  Demo Game 
 ZiogoDeCarte  Demo Game 
 Presepio 3D  Presepio 
 ScimmietteBanane  Game 
 Pac-Land Demo  Demo Game  
 Arcadia  Sparatutto scorrevole 
 Piramidix  Puzzle Games 
 Quiz Cartoons 90  quiz 
 Quiz Geografico  quiz 
 Quiz Invenzioni  quiz 
 Quiz Scoperte  quiz 
 Quiz Mario  quiz 
 Android    IMG   Genere 
 KignaoM  Puzzle 
  GAMES  IMG   Genere 
 TukTuk  Game 
 Pinball  Flipper 
 Kignao  Puzzle 
 PiccoloSciatore  SPORT 
 SuperRobotBros  PLATFORM 2D - 3D 
 Robottino  AVVENTURA 3D 
 EliCombat  SPARATUTTO ISO. 
 Elicombat3D  SPARATUTTO 3D 
 JesoloSurf  SCORREVOLE 2D ISO. 
 Agente71  SPARATUTTO 2D 
 Civic_Party  Gioco da Tavolo 
 Jack  AVVENTURA  
 Roulette  ROULETTE 
 Tommy  PLATFORM 2D - 3D 
 CivicRacing  CORSE ARCADE 3D 
 Arkanoid_C71  ROMPICAPO 
 ChuChuPuzzle  ROMPICAPO 
  Program   IMG   Genere 
 Monoscopio  UTILITY 
 Extra  UTILITY 
 ComandaMenuRestaurant  UTILITY 
 PiccoloAnimatore  ANIMATION 
 TicketBeach  GESTIONALE 
 Promemoria  UTILITY 
 EBM  Bookmaker Manager 
 StudioParticleU3D  GRAFICA 3D 
 TacFoto  GRAFICA 2D 
 HotelX  ALBERGHIERO 

UP