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

Questions
1

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

2

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

Very confused now...

3

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.

4

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

5

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

6

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
7

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

8

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

9

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: