我的西班牙语口音/lang语音在firefox/chrome上正常工作，但当使用IOS/iphone甚至Safari Desktop时，语言默认为英语语音？这是一个问题，因为英语口音念错了西班牙语，因此该应用程序在手机上毫无用处。无论如何都要解决这个问题？？
谢谢。
const main = document.querySelector('main');
const textarea = document.getElementById('text');
const readBtn = document.getElementById('read');
const toggleBtn = document.getElementById('toggle');
const closeBtn = document.getElementById('close');
const box= document.getElementById('box');
const data = [
{
image: './img/estados.jpg',
text: "Soy de Estados Unidos",
text2:"I am from the United States"
},
{
image: './img/bano.jpg',
text: "¿Dónde está el baño?",
text2:"Where is the bathroom?"
},
{
image: './img/english.jpg',
text: "Disculpe, ¿entiende inglés?",
text2:"Excuse me, do you understand English?"
},
{
image: './img/police.jpg',
text: "¿Dónde puedo encontrar a un policía?",
text2:"Where can I find a policeman?"
},
{
image: './img/help.jpg',
text: 'Necesito ayuda!',
text2:"I need help!"
},
{
image: './img/ambulance.jpg',
text: "Llame una ambulancia",
text2:"Call an ambulance"
},
{
image: './img/como.jpg',
text: "¿Cómo está?",
text2:"How are you?"
},
{
image: './img/sorry.jpg',
text: "Lo siento",
text2:"I'm Sorry"
},
{
image: './img/speak-slow.jpg',
text: "¿Puede hablar más despacio, por favor?",
text2:"Can you speak more slowly, please?"
},
{
image: './img/gracias.jpg',
text: 'Gracias',
text2:"Thank you"
},
{
image: './img/see-you-later.jpg',
text: 'Nos vemos',
text2:"See you later"
},
{
image: './img/price.jpg',
text: '¿Qué precio tiene…?',
text2:"What is the price?"
},
{
image: './img/phone.jpg',
text: '¿Puedo tomar prestado tu teléfono?',
text2:"May I borrow your phone"
},
{
image: './img/morning.jpg',
text: 'Buenos dias',
text2:"Good Morning"
},
{
image: './img/afternoon.jpg',
text: 'Buenas tardes',
text2:"Good Afternoon"
},
{
image: './img/night.jpg',
text: 'Buenas noches',
text2:"Good Night"
}
];
data.forEach(createBox);
//speechSynthesis.getVoices()
// Init speech synth
const message = new SpeechSynthesisUtterance();
const lang = 'es-ES';
message.voiceURI = 'native';
message.volume = 1; // 0 to 1
message.rate = 0.8; // 0.1 to 10
message.pitch = 1; //0 to 2
message.lang = 'es-ES', 'Paulina';
message.voice = voicesList.find((voice) => voice.lang === 'es-ES', 'Paulina');
// Create speech boxes
function createBox(item) {
const box = document.createElement('div');
const { image, text, text2 } = item;
box.classList.add('box');
box.innerHTML = `
<img src="${image}" alt="${text}" />
<div class="overlay">
<div class="translate">${text}</div>
</div>
<p class="info">${text2}</p>
`;
box.addEventListener('click', () => {
setTextMessage(text);
speakText();
// Add active effect
box.classList.add('active');
setTimeout(() => box.classList.remove('active'), 800);
});
main.appendChild(box);
}
//Set text
function setTextMessage(text) {
message.text = text;
}
// Speak text
function speakText() {
speechSynthesis.speak(message);
}
HTML
<!DOCTYPE html>
<html lang="es">
<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" />
<link rel="stylesheet" href="style.css" />
<title>Spanish Survival Guide</title>
</head>
<body>
<div class="header">
<h1>SPANISH SURVIVAL GUIDE</h1>
<h3>Hover over boxes to translate & click on boxes to hear the phrases!</h3>
<p>(Spanish voice accent currently not supported on safari browsers)</p>
</div>
<div class="container">
<main></main>
</div>
<script src="script.js"></script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>
您的代码几乎完成了，但有一个名为speechSynthesis.onvoiceschanged的事件，可以用来帮助填充可用语音的列表。从这里我们可以选择想要的声音。
我创建了一个概念验证：
它应该在iOS Safari 上工作
const data = [{
image: './img/estados.jpg',
text: "Soy de Estados Unidos",
text2: "I am from the United States"
},
{
image: './img/bano.jpg',
text: "¿Dónde está el baño?",
text2: "Where is the bathroom?"
},
{
image: './img/english.jpg',
text: "Disculpe, ¿entiende inglés?",
text2: "Excuse me, do you understand English?"
},
{
image: './img/police.jpg',
text: "¿Dónde puedo encontrar a un policía?",
text2: "Where can I find a policeman?"
},
{
image: './img/help.jpg',
text: 'Necesito ayuda!',
text2: "I need help!"
},
{
image: './img/ambulance.jpg',
text: "Llame una ambulancia",
text2: "Call an ambulance"
},
{
image: './img/como.jpg',
text: "¿Cómo está?",
text2: "How are you?"
},
{
image: './img/sorry.jpg',
text: "Lo siento",
text2: "I'm Sorry"
},
{
image: './img/speak-slow.jpg',
text: "¿Puede hablar más despacio, por favor?",
text2: "Can you speak more slowly, please?"
},
{
image: './img/gracias.jpg',
text: 'Gracias',
text2: "Thank you"
},
{
image: './img/see-you-later.jpg',
text: 'Nos vemos',
text2: "See you later"
},
{
image: './img/price.jpg',
text: '¿Qué precio tiene…?',
text2: "What is the price?"
},
{
image: './img/phone.jpg',
text: '¿Puedo tomar prestado tu teléfono?',
text2: "May I borrow your phone"
},
{
image: './img/morning.jpg',
text: 'Buenos dias',
text2: "Good Morning"
},
{
image: './img/afternoon.jpg',
text: 'Buenas tardes',
text2: "Good Afternoon"
},
{
image: './img/night.jpg',
text: 'Buenas noches',
text2: "Good Night"
}
];
function rand(items) {
// "|" for a kinda "int div"
return items[items.length * Math.random() | 0];
}
//speechSynthesis.getVoices()
// Init speech synth
const message = new SpeechSynthesisUtterance();
var voices = [];
message.voiceURI = 'native';
message.volume = 1; // 0 to 1
message.rate = 0.8; // 0.1 to 10
message.pitch = 1; //0 to 2
message.lang = 'es-ES', 'Paulina';
function resetLanguage() {
voices = speechSynthesis.getVoices();
console.log("Loaded Voices");
message.voice = voices.find((voice) => voice.lang === 'es-ES', 'Paulina');
}
resetLanguage(); // Call the function on the devices
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = resetLanguage;
}
function speakSpanish() {
console.log("Using voice " + message.voice.name);
message.text = rand(data).text;
speechSynthesis.cancel(); // Reset any messages in the queue
speechSynthesis.speak(message);
}<button onclick="speakSpanish()">
Speak
</button>