我有一个简单的应用程序,它应该读出以选定语言输入的文本。https:/speech -synthesis -demo.glitch.me。
这似乎在桌面上的多个浏览器中运行良好。 然而,当我尝试在Android版Chrome浏览器中运行它时,似乎改变语言没有任何效果,只使用默认语言(在我的例子中,英语)。
出于测试目的,我想做的是测试不同语言的计数。 例如,如果你在任何桌面浏览器上的应用中输入 "一 "字,你会听到用所选语言说出的数字一。 然而,在我的Android设备的Chrome浏览器上,无论从下拉菜单中选择什么语言,我都只能听到用英语说的 "one"。
代码与MDN上的speechSynthesis的例子完全一样。https:/developer.mozilla.orgen-USdocsWebAPIWindowspeechSynthesis。
let synth = window.speechSynthesis;
const inputForm = document.querySelector('form');
const inputTxt = document.querySelector('input');
const voiceSelect = document.querySelector('select');
let voices;
function populateVoiceList(){
voices = synth.getVoices();
for(var i=0; i< voices.length; i++){
let option = document.createElement('option');
option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
option.setAttribute('data-lang', voices[i].lang);
option.setAttribute('data-name', voices[i].name);
voiceSelect.appendChild(option);
}
}
populateVoiceList();
if (speechSynthesis.onvoiceschanged !== undefined) {
speechSynthesis.onvoiceschanged = populateVoiceList;
}
inputForm.onsubmit = function(event){
event.preventDefault();
let utterThis = new SpeechSynthesisUtterance(inputTxt.value);
var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
for(let i=0; i < voices.length; i++){
if(voices[i].name === selectedOption){
utterThis.voice = voices[i];
}
}
synth.speak(utterThis);
inputTxt.blur();
}
奇怪的是,手机浏览器的默认语言是孟加拉语(bn_BD),我以为是英语。
你可以明确指定 SpeechSynthesisUtterance.lang
const input = document.querySelector("#input");
const speechSynthesis = window.speechSynthesis;
const speak = () => {
let speechSynthesisUtterance = new SpeechSynthesisUtterance(input.value);
speechSynthesisUtterance.lang = 'en-US';
speechSynthesis.speak(speechSynthesisUtterance);
}
input.addEventListener("change", speak);
<input id="input" type="text" value="one" />