Text to Speech [TTS] for Chat


#1

This is a migrated conversation between myself and @peckingbird from the old PhantomBot forum. This is to preserve the work.


I currently use Scorpbot to manage my channel and chat. When I am playing an intense game and I cannot read chat, I use text to speech. It utilizes Windows text to speech. I would love to have the same option in PhantomBot. Not sure if there is a workaround right now as I also use Restream.io Chat to help me manage multistreaming. Thank you.

peckingbird 19 days ago
Hey, tried creating a quick TTS system for PhantomBot. It tries… Perhaps someone with more knowledge of PB could adapt this to work?
speakSystem.js
Upon !shout <text to TTS> it generates a url that could theoretically be passed to a Audio object to be played, with .play(). However because there is no window, “Audio” is undefined. At the moment, it just outputs the link to the audio to the chat.Thought I could use whatever method PB uses for audio hooks, but turns out PB uses ion sounds…
Will revisit the issue tomorrow if no one has a solution.
Sorry in advance for my terrible documentation/indentation. Also just realized the links generated don’t work… Welp.


Alerts Sounds in OBS (Mac)
Do we have somethins like tts?
#2

peckingbird 19 days ago
Welp… I got something working. I know this is not a solution to your problem, as it does not read everything in the chat. However it does provide people in the chat with a method of making sure you hear their message.
If you place this code in /scripts/systems/speakSystem.js (will have to create this file). Then place the following code into /web/alerts/js/alertHandler.js (I placed it around line #108):

//START TTS
	if (imageFile.substring(0,7) == "<voice>"){//Check if voice alert.
	    var textToSpeak = imageFile.substring(7);//Remove "<voice>"
	    //Pass text to window object.
	    var ttsEngine = new SpeechSynthesisUtterance();
	    ttsEngine.text = textToSpeak;
	    window.speechSynthesis.speak(ttsEngine);
	}
	//END TTS

Viewers will be able to have their messages vocalized using the command !shout "text to be said aloud". This makes use of the alerts system, so for this to work your broadcasting software must have localhost:25005/alerts open, or you can simply have that page open in your browser.
Hope this helps!


#3

Thank you so much @peckingbird ! I can’t wait to try it! I know a lot of other people will benefit from having this feature and I hope more people like you can pitch in to expand on the code. I am no js coder, but I will do my best to follow your instructions. I’ll let you know how it goes. Cheers!


#4

@peckingbird the !shout command. I didn’t hear tts actually speak “hello”. Is there something I missed? Thanks.


#5

Sorry for our spam filters marking your post as spam. I changed the setting to make sure it does not happen again in the future.


#6

peckingbird 18 days ago
@MotoBrigade Have you got localhost:25005/alerts open in your browser? I know OBS with a webkit browser plugin doesn’t pick up the noise. Just tested, and you should be able to hear it if you have the page open in the newest version of Firefox or Chrome. Haven’t been able to test Internet Explorer, as I don’t have access to a Window machine (Linux user).
I have also edited speakSystem.js so that it does not post in the chat, to prevent it spamming, and will accept multi-word shouts that are outside of quotation marks. !shout No quote marks needed. This version also has the !shout command permission be for everyone, rather than undefined.
Sorry for the slow reply, the PhantomBot forums seem to be having trouble at the moment.


#7

Thank you! I noticed that so thanks for the rescue! :innocent:


#8

MotoBrigade 17 days ago
@peckingbird Oh, I see. I didn’t have localhost:25005/alerts open in my browser. I just tried it and it works great! Thank you! As far as compatibility, it does work with Edge so that’s cool.

Can you clarify what you mean by “it does not post in the chat, to prevent it spamming”?


#9

peckingbird 17 days ago
Ah good potatoes. Glad it works for you!
So the second version of speakSystem.js I posted does not have the bot post “Text to say” into the chat. So in the case of your earlier screenshot there would be no post by motobot_ saying “hello”.
Hope this helps clarify.


#10

MotoBrigade 16 days ago
@peckingbird Yes, I noticed that change and I think it looks good as well in chat. Thank you, again, for your work on this! Looking forward to incorporating more PhantomBot in my streams!


#12

Has anyone discovered a way of preventing the TTS being stopped by the use of a comma in the !shout command? and/or a way to increase the volume?


#13

Sadly, I have not found a way to correct the comma problem. I’m sure it is something simple but I don’t know code and @peckingbird who wrote the original script hasn’t joined us here on the new forums. As far as volume control, maybe you could use a program like Voice Meeter to separate the channels and adjust to your liking?


#14

Maybe @mausmani script here does not have that issue? Do we have somethins like tts?


#15

This TTS script works with commas, and periods in the input text.

Place the following file under BotFolder\scripts\systems :
speakSystem.js (3.1 KB)

Then in BotFolder\web\alerts\js\alertHandler.js , add the following code above the line:
imageFileBasename = imageFile.substring(0, imageFile.indexOf('.'));

		//START TTS
		if (imageFile.substring(0,7) == "<voice>"){//Check if voice alert.
			var textToSpeak = imageFile.substring(7);//Remove "<voice>"
			//Pass text to window object.
			var speech = new SpeechSynthesisUtterance(textToSpeak);
			var voices = window.speechSynthesis.getVoices();
			speech.default = false;
			speech.voice = voices.filter(function(voice) { return voice.name == 'Google UK English Female'; })[0];
			speech.lang = 'en-GB'; //Also added as for some reason android devices used for testing loaded spanish language 
			speech.volume = 0.70;
			window.speechSynthesis.speak(speech);
			return;
		}
		//END TTS

That’s it! You need to keep http://localhost:25000/alerts open, and then type:
!say Hello world
in chat to hear the text!

To customize this, here are the options:

  • If you want to change the voice, open the following site:


Scroll down to the section titled “HTML”, below which there will be a drop down with the available Voices and its corresponding language. Choose one you want and you can modify these 2 line in the code above:

speech.voice = voices.filter(function(voice) { return voice.name == ‘Google UK English Female’; })[0];
speech.lang = 'en-GB’;

  • If you want to adjust the volume of the speech, you can modify the below value between 0 (lowest) to 1 (loudest):

    speech.volume = 0.70;

  • In “speakSystem.js”, you can modify the price of the command by changing the following value:

    var PRICE = 20;

  • In “speakSystem.js”, to change the command that calls the TTS (default is !say), modify the below highlighted text:

    Line 88: if (command.equalsIgnoreCase(‘say’)){
    Line 95: $.registerChatCommand(’./systems/speakSystem.js’,‘say’,7);


Do we have somethins like tts?
#16

I just tested this out, it works fine with OBS and just using a browser, but not with xsplit :stuck_out_tongue:


#17

Cau you explain how to change voice language?
e.g., i want use google ru, what i need to change? I can’t understand…


#18

Very thorough instructions. Thank you! :raised_hands:


#19

Copy the values from the linked website which I had provided. For Russian, it is:

speech.voice = voices.filter(function(voice) { return voice.name == ‘Google русский’; })[0];
speech.lang = ‘ru-RU’;


#20

I could not find where it needed to be replaced, because I was looking for the wrong file. Now I have found. Thank you)


#21

Is it possible to improve this script so that it reads the sender’s name as well?