Login/Register
iOS Safari SpeechSynthesisUtterance can not set language
Asked Answered
Solved javascripthtmlsafarimobile-safari
U

4

6

I have SpeechSynthesisUtterance working in my native language (English) but I need to set the language to Italian for correct pronunciation.

The code works correctly in Mac Safari but in iOS Safari the pronunciation is English not Italian.

An easy test is the Italian: "Ho i soldi", "h"is silent in Italian.

<!DOCTYPE html><html lang='en' class=''>

<head><meta charset='UTF-8'></head>
<body>

<button id="Ho una prenotazione." onclick=speak(id)>Ho una prenotazione.</button>
I have a reservation

<script >
    function speak(text) {
        var msg    = new SpeechSynthesisUtterance(text);
        msg.lang = 'it-IT';
        window.speechSynthesis.speak(msg);
    }
</script>


</body></html>

Here is a test example of the above code.

I have downloaded Italian "Luca" and have set it as the Default at Settings:General:Accessibility:Speech:Voices:Italian;Luca

Note:

I have posted an inquiry to the Apple Safari and Web Development Forum on Jul 26, 2018 with the result of no response to date: (422 Views, 0 Replies).

I have also submitted an Apple Developer Technical Support (DTS) request August 16, 2018 that was declined with a suggestion to post to the Web Development Forum.

This while this might be deemed off-topic please consider I have tried debugging and requested help from Apple which has been ignored and denied.

Udate:

Thus seems to be an iOS beta issue, even the Chrome and Firefox apps has the English pronunciation. I have files a Beta bug report on this issue.

Unlucky answered 18/8, 2018 at 1:51 Comment(7)
Perhaps in iOS you need to specify exactly which voice you want with SpeechSynthesisUtterance.voice? You can get a list of available voices with SpeechSynthesis.getVoices, and SpeechSynthesisVoice.lang can be used to see which one(s) are for what language. – Triboluminescent
I have tried specifying a voice and left that code out to make a simpler example but perhaps the code is bad, here is what I used: msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Luca'; })[0]; – Unlucky
What version(s) of iOS Safari are you using? – Triboluminescent
iOS versions: iPhone 6s 11.4.1 (15G77), iPad mini 12.0 (16A5357b), iPhone 6+ (16A5357b). All fail Italian pronunciation. – Unlucky
Update: Three other iDevices work correctly. – Unlucky
Can you check that SpeechSynthesis.getVoices().filter(function(voice){return voice.name == 'luca';}) returns what you expect on the devices that don't seem to be working? (e.g. by writing it to the page, or putting it in an alert() call.) – Triboluminescent
@zaph, Thanks for your question. I didn't know the SpeechSynthesisUtterance JavaScript class. – Eddra
O
5

I have to little rep to post this in the comments so i will post it as an answer. I see that you are running iphone 6s, but i tried it on my iphone X and on my Mac with both english and italian in different browsers.

There is a possibility that the problem persists within your phone or os because it seems to work perfect on my devices, have you tried any other devices than your iphone 6s?

Ovalle answered 24/8, 2018 at 10:5 Comment(5)
You are correct and wrong at the same time. I tried the sample Italian on my three devices and it fails, I tried it on two of my wife's devices and it works as well as a 5S. Trying to figure out why now. If necessary I will wipe the iPhone 6 and setup from scratch. – Unlucky
have you tried checking the safari version, perhaps certain versions don't support different t2s languages? lifewire.com/check-the-version-number-of-safari-446563 – Ovalle
From the site in the above comment: Because Safari is part of the iOS operating system, its version is the same as the iOS. I changed the speech language setting in the 6S iPhone and re-booted, not it has the correct pronunciation. I will work with the other two iOS devices later. – Unlucky
So you basically found the "fault"? – Ovalle
Not sure, it may be an iOS Beta issue, I have submitted a beta bug report. If that continues to proves or seem to be the problem I will award the bounty to you barring a specific correct answer. – Unlucky
E
6

I ran into that problem (iOS 14.3).

In iOS, it is not enough to set the lang property. You also need to set the voice attribute.

Example:

const utterance = new SpeechSynthesisUtterance('156')
const lang = 'zh-CN'

// Without the following line, voice remains in English on iOS
// voicesList is here the retured value of speechSynthesis.getVoices()
utterance.voice = voicesList.find((voice) => voice.lang === 'zh-CN')

utterance.lang = 'zh-CN'
speechSynthesis.speak(utterance)
Elroyels answered 25/1, 2021 at 11:8 Comment(0)
O
5

I have to little rep to post this in the comments so i will post it as an answer. I see that you are running iphone 6s, but i tried it on my iphone X and on my Mac with both english and italian in different browsers.

There is a possibility that the problem persists within your phone or os because it seems to work perfect on my devices, have you tried any other devices than your iphone 6s?

Ovalle answered 24/8, 2018 at 10:5 Comment(5)
You are correct and wrong at the same time. I tried the sample Italian on my three devices and it fails, I tried it on two of my wife's devices and it works as well as a 5S. Trying to figure out why now. If necessary I will wipe the iPhone 6 and setup from scratch. – Unlucky
have you tried checking the safari version, perhaps certain versions don't support different t2s languages? lifewire.com/check-the-version-number-of-safari-446563 – Ovalle
From the site in the above comment: Because Safari is part of the iOS operating system, its version is the same as the iOS. I changed the speech language setting in the 6S iPhone and re-booted, not it has the correct pronunciation. I will work with the other two iOS devices later. – Unlucky
So you basically found the "fault"? – Ovalle
Not sure, it may be an iOS Beta issue, I have submitted a beta bug report. If that continues to proves or seem to be the problem I will award the bounty to you barring a specific correct answer. – Unlucky
S
3

This issue seems to be purely for the beta. The same HTML works fine on iOS 11.4.1 for the iPhone 6, 7 and 8 Plus. By changing the language to Spanish, however, it works perfectly.

<html lang='es' class=''>

Of course, this would mean your whole site is considered Spanish, but it seems to be one or the other if you insist on using the beta.

Spontaneous answered 27/8, 2018 at 10:53 Comment(0)
I
0

this is a complete answer from Potts solution and it works for me:

const utterance = new SpeechSynthesisUtterance('156')
const voicesList = window.speechSynthesis.getVoices()
const lang = 'zh-CN'

// Without the following line, voice remains in English on iOS
// voicesList is here the retured value of speechSynthesis.getVoices()
utterance.voice = voicesList.find((voice) => voice.lang === 'zh-CN')

utterance.lang = 'zh-CN'
speechSynthesis.speak(utterance)
Isopropyl answered 16/10, 2022 at 10:34 Comment(1)
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Bruce

© 2022 - 2024 — McMap. All rights reserved.