网络语音 API 未正确加载 Chrome 中 Android 的语音
Web Speech API not properly loading voices in Chrome for Android
我有一个简单的应用程序,可以读出以选定语言输入到输入字段中的文本:https://speech-synthesis-demo.glitch.me/
这似乎在多种浏览器的桌面上运行良好。但是,当我尝试在 Chrome 中 运行 for Android 时,似乎更改语言没有效果,并且只使用默认语言(在我的例子中是英语)。
出于测试目的,我想做的是测试不同语言的计数。例如,如果您在任何桌面浏览器上的应用程序中输入 'one' 一词,您将听到用所选语言说出的数字。但是,在我的 Android 设备上的 Chrome 上,无论从下拉列表中选择什么语言,我都只能听到 "one" 说英语。
代码与 MDN 上的 speechSynthesis 示例完全相同:https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis
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();
}
奇怪的是,移动浏览器的默认语言是 Bangla Bangladesh (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" />
我有一个简单的应用程序,可以读出以选定语言输入到输入字段中的文本:https://speech-synthesis-demo.glitch.me/
这似乎在多种浏览器的桌面上运行良好。但是,当我尝试在 Chrome 中 运行 for Android 时,似乎更改语言没有效果,并且只使用默认语言(在我的例子中是英语)。
出于测试目的,我想做的是测试不同语言的计数。例如,如果您在任何桌面浏览器上的应用程序中输入 'one' 一词,您将听到用所选语言说出的数字。但是,在我的 Android 设备上的 Chrome 上,无论从下拉列表中选择什么语言,我都只能听到 "one" 说英语。
代码与 MDN 上的 speechSynthesis 示例完全相同:https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis
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();
}
奇怪的是,移动浏览器的默认语言是 Bangla Bangladesh (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" />