Page 1 of 2

Speech module supporting screen readers and WebTTS

Posted: Fri Apr 05, 2024 3:17 pm
by Quin
I wrote this simple module to support speech in your SB apps. It can either speak to screen readers only using a hidden aria-live region, or to everyone using WebTTS.

Code: Select all

; Speech module, written by Quin, March/April 2024.

CompilerIf #PB_Compiler_IsMainFile
	EnableExplicit
CompilerEndIf

DeclareModule Speech
	EnableExplicit
	
	;{ Declares
	Declare Init()
	Declare Speak(Text$)
	Declare                                                       SetWebTTS(State.b)
	;} End declares
EndDeclareModule

Module Speech
	EnableExplicit
	
	;{ Globals
	Global WebTTS.b = #False
	! var synth, aria;
	;} End Globals
	
	;{ Procedures
	Procedure Init()
		! synth = window.speechSynthesis;
		! aria = document.createElement("div");
		! aria.id = "speech";
		! aria.style = "position: absolute; left: 0px; top: -400px";
		! aria.setAttribute("aria-live", "assertive");
		! document.body.appendChild(aria);
	EndProcedure
	
	Procedure Speak(text$)
		If WebTTS
			! const utterThis = new SpeechSynthesisUtterance(v_text$);
			! if (typeof(synth.stop) !== "undefined") synth.stop();
			! synth.speak(utterThis);
		Else
			! aria.innerHTML = "";
			! const para = document.createElement("p");
			! para.appendChild(document.createTextNode(v_text$));
			! aria.appendChild(para)                    ;
		EndIf
	EndProcedure
	
	Procedure SetWebTTS(State.b)
		WebTTS =  State
	EndProcedure
	;} End Procedures
EndModule

;{ Test
CompilerIf #PB_Compiler_IsMainFile
	Global UseWebTTS.b = #False
	
	Procedure ButtonCallback()
		Speech::Speak("Hi!")
		UseWebTTS ! 1
		Speech::SetWebTTS(UseWebTTS)
	EndProcedure
	
	Speech::Init()
	OpenWindow(0, 10, 10, 200, 100, "Speech Test")
	ButtonGadget(0, 15, 15, 190, 90, "Say hi!")
	BindGadgetEvent(0, @ButtonCallback())
CompilerEndIf
;} End test
As you can probably see, usage is pretty simple. Call Speech::Init() at the start of your app, call Speech::SetWebTTS() if you want to toggle the usage of WebTTS, and call Speech::Speak() to say some text through the selected output method.
Enjoy :)

Re: Speech module supporting screen readers and WebTTS

Posted: Sat Apr 06, 2024 5:55 am
by Caronte3D
Nice and simple, thanks ;)

Re: Speech module supporting screen readers and WebTTS

Posted: Sat Apr 06, 2024 9:00 am
by Fred
Great !

Re: Speech module supporting screen readers and WebTTS

Posted: Sat Apr 06, 2024 9:51 am
by munfraid
Wow, cool! Thanks!

Re: Speech module supporting screen readers and WebTTS

Posted: Tue Apr 09, 2024 10:35 pm
by Quin
Update with slightly cleaner, more compact code, and the button in the tester app will now toggle between ARIA and web TTS on every press.

Re: Speech module supporting screen readers and WebTTS

Posted: Wed Apr 10, 2024 9:39 am
by Dirk Geppert
Really nice! Thank you Quin.

I would like to select another voice and found here: https://developer.mozilla.org/en-US/doc ... ance/voice
an example, how to select voice. Is it possible for you to integrate this into SB?

Kind regards

Dirk

Re: Speech module supporting screen readers and WebTTS

Posted: Wed Apr 10, 2024 9:55 am
by Peter
Dirk Geppert wrote: Wed Apr 10, 2024 9:39 amIs it possible for you to integrate this into SB?
viewtopic.php?p=4152#p4152

Re: Speech module supporting screen readers and WebTTS

Posted: Wed Apr 10, 2024 1:42 pm
by Paul
Is this browser specific?
Only the WebTTS version produces voice here using Edge browser, the other one is silent.

Re: Speech module supporting screen readers and WebTTS

Posted: Wed Apr 10, 2024 1:44 pm
by Quin
Paul wrote: Wed Apr 10, 2024 1:42 pm Is this browser specific?
Only the WebTTS version produces voice here using Edge browser, the other one is silent.
It works in Firefox and Edge, from what I've tested.
The other is supposed to be silent, it'll only speak to screen readers, if available. I have NVDA running, and it speaks.

Re: Speech module supporting screen readers and WebTTS

Posted: Thu Apr 11, 2024 6:42 am
by Dirk Geppert
Peter wrote: Wed Apr 10, 2024 9:55 am
Dirk Geppert wrote: Wed Apr 10, 2024 9:39 amIs it possible for you to integrate this into SB?
viewtopic.php?p=4152#p4152
Thx Peter! It works with Chrome and Edge, but with Firefox there seems to be a problem with the initialisation. I only see a blank page without an error message in the console.