Speech module supporting screen readers and WebTTS

Share your advanced knowledge/code with the community.
Quin
Posts: 118
Joined: Wed Nov 08, 2023 4:38 pm

Speech module supporting screen readers and WebTTS

Post 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 :)
Last edited by Quin on Tue Apr 09, 2024 10:08 pm, edited 1 time in total.
User avatar
Caronte3D
Posts: 187
Joined: Sat Nov 23, 2019 5:21 pm
Location: Some Universe

Re: Speech module supporting screen readers and WebTTS

Post by Caronte3D »

Nice and simple, thanks ;)
Fred
Site Admin
Posts: 1820
Joined: Mon Feb 24, 2014 10:51 am

Re: Speech module supporting screen readers and WebTTS

Post by Fred »

Great !
munfraid
Posts: 135
Joined: Sat Mar 24, 2018 1:33 pm

Re: Speech module supporting screen readers and WebTTS

Post by munfraid »

Wow, cool! Thanks!
Quin
Posts: 118
Joined: Wed Nov 08, 2023 4:38 pm

Re: Speech module supporting screen readers and WebTTS

Post 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.
Dirk Geppert
Posts: 330
Joined: Fri Sep 22, 2017 7:02 am

Re: Speech module supporting screen readers and WebTTS

Post 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
User avatar
Peter
Posts: 1197
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Speech module supporting screen readers and WebTTS

Post 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
User avatar
Paul
Posts: 210
Joined: Wed Feb 26, 2014 6:46 pm
Location: Canada
Contact:

Re: Speech module supporting screen readers and WebTTS

Post by Paul »

Is this browser specific?
Only the WebTTS version produces voice here using Edge browser, the other one is silent.
Quin
Posts: 118
Joined: Wed Nov 08, 2023 4:38 pm

Re: Speech module supporting screen readers and WebTTS

Post 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.
Dirk Geppert
Posts: 330
Joined: Fri Sep 22, 2017 7:02 am

Re: Speech module supporting screen readers and WebTTS

Post 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.
Post Reply