Giters

mdn / dom-examples

Code examples that accompany various MDN DOM and Web API documentation pages

Home Page:https://developer.mozilla.org/en-US/docs/Web/API

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webkitSpeechRecognition not working for other languages in iPhone

Sendhilkumaar opened this issue · comments

commented

am trying to use the webkitSpeechRecognition to get the spoken word by the user. It works in desktop for English and Tamil (lang='ta'). On iPhone it works for English but not for Tamil (lang = 'ta').

In the following code,
if lang='en-us', the page asks for access to microphone,
if lang = 'ta', the page doesn't work (no request to access microphone)

<title>Speech to Text</title>


<script>
	var speech = true;
	window.SpeechRecognition = window.SpeechRecognition
					|| window.webkitSpeechRecognition;

	const recognition = new SpeechRecognition();
	**recognition.lang = 'ta';**

	recognition.interimResults = true;
	const words = document.querySelector('.words');
	words.appendChild(p);
	console.log(words)

	recognition.addEventListener('result', e => {
		const transcript = Array.from(e.results)
			.map(result => result[0])
			.map(result => result.transcript)
			.join('')

		document.getElementById("p").innerHTML = transcript;
		console.log(transcript);
	});
	
	if (speech == true) {
		recognition.start();
		recognition.addEventListener('end', recognition.start);
	}
</script>
commented

Hi @Sendhilkumaar, looks like ta is an invalid lang, have you tried ta-IN or ta-LK?

You can check here https://gist.github.com/typpo/b2b828a35e683b9bf8db91b5404f1bd1 for more lang.

commented

hi @sinchang , it doesn't work with ta-IN, ta-LK as well. It does work well for "en".

commented

Hi folks :)

I just built and used Chrome on Win11 to open a local test.html file with the following contents:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webkitSpeechRecognition Test</title>
</head>

<body>
    <script>
        var speech = true;
        window.SpeechRecognition = window.SpeechRecognition
            || window.webkitSpeechRecognition;

        const recognition = new SpeechRecognition();
        recognition.lang = 'ta';

        recognition.interimResults = true;
        const words = document.querySelector('.words');
        // words.appendChild(p);
        // console.log(words)

        recognition.addEventListener('result', e => {
            const transcript = Array.from(e.results)
                .map(result => result[0])
                .map(result => result.transcript)
                .join('')

            document.getElementById("p").innerHTML = transcript;
            console.log(transcript);
        });

        if (speech == true) {
            recognition.start();
            recognition.addEventListener('end', recognition.start);
        }
    </script>

    <div class="words"></div>
    <p id="p"></p>
</body>

</html>

When I spoke into my mic, Speech Recognition did indeed pick up my words and appended them to the DOM in Tamil.

It seems probable to me that the browser APIs have changed since early 2023, when this issue was opened.

@Sendhilkumaar - if you are still having a problem with this API, please re-open this issue with a new comment.