Speeeeeeech ;). (yihaa, so glad it is there, but I have a question)

I cannot express how happy I am that speech is now so easy in ZIM. I mean the text to speech.

The example code works nice, but I have a question.
My target market is "dutch speaking".
When I run the code below, then I can select a dutch (Nederlands) voice and the text to speech works fine, but I would like to be able to iterate over the list of available voices and filter the ones that are og language "nl-NL" and "nl-BE" which are the Dutch ones.

I tried this code

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ZIM 016 - Speech Talk with Voices - Code Creativity</title>

    <script type=module>

import zim from "https://zimjs.org/cdn/016/zim";

// See Docs under Frame for FIT, FILL, FULL, and TAG
// caves - from Spaghetti Guitar In Space by Peter Surdoval
new Frame(FIT, 1024, 768, interstellar, black, ready);
function ready() {
    
    // let user pick a voice
    const speech = new Speech();
    console.log (speech);


    new Button({label:"TALK"}).center().mov(0,-120).tap(()=>{  
        speech.talk("Welke provincie is gekleurd? Typ de correcte naam. Proficiat, dit was inderdaad West-Vlaanderen.", list?list.text:null);
    });
    let list;
	if (!M) {
		speech.on("voiceschanged", ()=>{ // must wait for voices to be loaded
			if (list) list.dispose(); // seems to run only once but just in case
			list = new List(500,300,speech.voices,6).center().mov(0,120);
			S.update();
		});
	}

        
}

</script>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

<body></body>

</html>

The line where I console.log (speech) does return me in console some kind of object. I shows Qo.speech..............

When I expand this in console, then I see it contains voiceLanguages, voiceLookup and even voiceObject with all kinds of valuable info about the speech.

Only problem is that I don't seem to find a way to get to that data. It always returns me undefined data.

How could I iterate over this data in the speech object and console log every voice (the name) where the language is "nl-BE" or "nl-NL" ?

If I can do that, then I could prefilter the voices and select a dutch voice + if the user wants to change voice I would only present them the dutch voices.

Hopefully somebody can help a little?

Thank you,
Bart

Little follow up, but if I type console.log ("-"+speech+"-"); then the console shows [EventDispatcher]

Very confused now...

and another little update. I tried putting the democode (1 on 1 copy) at ZIM 016 - Speech Talk with Voices - Code Creativity and with a desktop pc.... I see the app with the "talk" button and the list of voices, but on my iphone... the list is not showing. The talk button however DOES talk even on iphone.

Maybe @karelrosseel82 can work through these issues with you... as I worked through them with him ;-). They sound very familiar.

Hi @EducaSoft I can help ofcourse :slight_smile: I tried a lot to make it working on ZIM and phone :slight_smile:

Well I do have it working on iPhone. At least it talks, but I cannot select a voice.
I discovered that on iPhone you simply call the speech.talk("hello world",null); and the iphone talks in the default voice (which on my phone is Ellen and not the best voice).

You just don't seem to be able to get a voice list and probably (some research later) this is because ios uses the default voice in IOS to do text to speech.

I also found that you CAN change the voice under accessability in the iphone settings to for example the "Xander" voice, but since Xander is Dutch Netherlands and Ellen is Dutch Belgium, you also have to change the region of your iphone to The Netherlands to get Xander to speak.

Unless you know another way of course @karelrosseel82

My initial question is more about how to retrieve the list of voices + their language from the speech object.

I discovered that I can also easily extract tgem from the speechSynthesis object in javascript.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ZIM 016 - Speech Talk with Voices - Code Creativity</title>

    <script type=module>

import zim from "https://zimjs.org/cdn/016/zim";

// See Docs under Frame for FIT, FILL, FULL, and TAG
new Frame(FIT, 1024, 568, interstellar, black, ready);
function ready() {
    
    const speech = new Speech();
    new Button({label:"TALK"}).center().mov(0,-120).tap(()=>{  
        speech.talk("Welke provincie is gekleurd? Typ de correcte naam. Proficiat, dit was inderdaad West-Vlaanderen.", list?list.text:null);
    });
    let list;
	if (!M) {
		speech.on("voiceschanged", ()=>{ // must wait for voices to be loaded
			if (list) list.dispose(); // seems to run only once but just in case
			list = new List(500,300,speech.voices,6).center().mov(0,120);
			S.update();
		});
	}
}

function updateVoices() {
    const voices = speechSynthesis.getVoices();
    voices.forEach((voice) => {
        if (voice.lang == 'nl-NL' || voice.lang == 'nl-BE') {
            console.log (`${voice.name} (${voice.lang})`);
        }
    });
}

if (speechSynthesis.onvoiceschanged !== undefined) {
    speechSynthesis.onvoiceschanged = updateVoices;
}

// Update voices immediately in case they are already loaded
updateVoices();

</script>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

<body></body>

</html>

So any suggestions are welcome. aybe you found other ways around ?

1 Like

yes correct no voices can be selected the standard way.
I found out in this app how to do

here

ask when questions.
greetz karel

these apps above don't let me select voices on ios. They speak, but that does any call to the speech.talk

I do not have iOS but try this (made for Android)

zapp

This is the example where you can specify and see the languages of the system to talk on mobile devices (problem is still you only see)

dutch with new Pane()

Starting a game with a new Pane(),
Now with a voice of Android of iOS
test your voice

ZIM is really cool with new Speech() :slight_smile:

At the TTS level, I believe it is Google TTS you re using? Have you ever tried facebook meta ai which not only cover more languages but also provide translation, meaning you will have a game supporting multi languages, at least 2 languages. The first AI model that translates 100 languages without relying on English data
It can be done with Goolgle TTS, but you will have to keep 2 distinct audios.

No, i am not correct. There is no need to keep 2 version of texts. The limitation for me is that Google TTS does not support the language i want.

Would be grat translation would work by buttons automatic.. for example i18next ?

See documentation https://www.i18next.com/

I found out p5js can do voices now from other server

Check this video @EducaSoft

I hope @danzen and @Abstract will intergrate it in 020 :slight_smile:

Just a note the @danzen is an account that I made when I was away - I never see messages to it. I am @Abstract here.

1 Like

At 19 minutes in the video above, it talks about text to speech and it is using a different library called Kokoro - so we will not be bringing in that into the ZIM world... that would be up to you to install and follow what he did. Not terribly pleasant, but not really that much code. If anyone gets it working, let us know, we can have a look and perhaps it will make us reconsider.

1 Like

I love too

Karel, dit you LISTEN to the generated speech in Belgian Dutch and Dutch from the Netherlands? I hope I won't get nightmares from it tonight. Kokoro, Coqui, they all sound terrible. In the current project I am making, I am pregenerating my text to speech using Google Gemini 3.1 TTS. Sure it costs me around €2 per hour of generated audio, but it sounds absolutely fabulous.

I'm currently creating a new project (actually educational apps but this time for toddlers an preschoolers) and these are in 20! different languages. I created the needed scripting and automatisations and am currently spending around €0,50 per day generation huge amount of speech files. They don't only sound good, they even have emotion in them and because they are pregenerated I only have to create then once. Agreed they are not dynamic, but they are soooooo good.

Once the site launches with the first 20 activities on them then I'll post something here about it. Until now... not a single TTS impressed me in Dutch (except a few elevenlabs voices which are acceptable and Gemini 3.1 which is SUPERB)

1 Like

as a little teaser.... here is a little demo (in Dutch, sorry Dan :wink: )

https://www.bolleboos.be/coderen/

That sound makes me get wet dreams :wink:

waauw very cool dutch .. not flemish :wink:
did you test my new app
pet bits drag an dropping watch the videos..

I was looking to https://docs.cloud.google.com/gemini-enterprise-agent-platform/models/live-api/configure-language-voice



RESPOND IN dutch. YOU MUST RESPOND UNMISTAKABLY IN dutch.

https://docs.cloud.google.com/text-to-speech/docs/gemini-tts
if you start the example with emotion!

found out @Abstract


https://www.reddit.com/r/godot/comments/1qecus0/just_made_godot_kokoro_tts_highquality_neural/

https://huggingface.co/spaces/hexgrad/Kokoro-TTS