Web Speech API无法在Android版Chrome中正确加载语音 [英] Web Speech API not properly loading voices in Chrome for Android

问题描述

我有一个简单的应用程序，可以读取以所选语言输入到输入字段中的文本:https://speech-synthesis-demo.glitch.me/

I have a simple app that should read out text entered into an input field in a selected language: https://speech-synthesis-demo.glitch.me/

这似乎可以在多种浏览器的桌面上很好地工作.但是，当我尝试在Android版Chrome浏览器中运行它时，更改语言似乎无效，并且仅使用默认语言(在我的情况下为英语).

This seems to work well on desktop in multiple browsers. However, when I try to run it in Chrome for Android, it seems that changing the language has no effect, and only the default language is used (in my case, English).

出于测试目的，我想做的是测试使用不同语言进行计数.例如，如果您在任何台式机浏览器的应用程序中输入单词"one"，就会听到用所选语言说出的数字1.但是，在我的Android设备上的Chrome上，无论从下拉菜单中选择哪种语言，我都只会说一个"英语.

For testing purposes, what I'm trying to do is test out counting in different languages. If you enter in the word 'one' for example in the app on any desktop browser, you'll hear the number one spoken in the selected language. However, on Chrome on my Android device, I only hear "one" spoke in English no matter what language is selected from the dropdown.

代码与MDN上的语音合成示例完全相同:

The code is exactly the same as the example on MDN for 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();
}

奇怪的是，移动浏览器中的默认语言是孟加拉国孟加拉(bn_BD)，我希望它是英文.

Oddly, the default language in the mobile browser is Bangla Bangladesh (bn_BD), which I expected to be English.

推荐答案

您可以明确指定 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" />

这篇关于Web Speech API无法在Android版Chrome中正确加载语音的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！