我计划将某些事件的文本转换为语音。 Web Speech API 支持哪些语言？
支持的语音取决于浏览器和操作系统。随着更多声音的添加，这种情况随着时间的推移而演变。
我编写了一个 JSBin，可以在该操作系统中显示浏览器的声音：https://output.jsbin.com/dehoyavize
"use strict";
/** Draw table from array of objects **/
const drawTable = (obArr, tableDiv) => {
const table = document.createElement('table');
// Table header row
const thr = document.createElement('tr');
for (const p in obArr[0]) {
// Get column headers from voice attributes
const th = document.createElement('th');
th.appendChild(document.createTextNode(p));
thr.appendChild(th);
}
table.appendChild(thr);
// Build rows
for (const obj of obArr) {
const tr = document.createElement('tr');
for (const p in obj) {
// Build table from each voice's attribute values
const td = document.createElement('td');
td.appendChild(document.createTextNode(obj[p]));
tr.appendChild(td);
}
table.appendChild(tr);
};
// Add table to document
tableDiv.appendChild(table);
};
/** get w3c voices **/
if ('speechSynthesis' in window) {
const tableDiv = document.querySelector('#tableDiv');
let voices = speechSynthesis.getVoices();
if (voices.length) {
// Safari; FF caches voices after 1st load
drawTable(voices, tableDiv);
} else {
// Opera win, Firefox 1st load, Chrome
speechSynthesis.onvoiceschanged = () => {
voices = speechSynthesis.getVoices();
drawTable(voices, tableDiv);
};
}
} else {
// No window.speechSynthesis thus no voices
// Opera android, etc.
document.querySelector('#tableDiv').innerText = 'This browser has no voices';
}table, td, th {
border: 1px solid black;
font-family: sans-serif;
}
tr:nth-child(even) {
background-color: #eee;
}<body>
<div id="tableDiv">
</div>
</body>在一个旧帖子中，我发现支持以下语言的信息。
var langs =
[['Afrikaans', ['af-ZA']],
['Bahasa Indonesia',['id-ID']],
['Bahasa Melayu', ['ms-MY']],
['Català', ['ca-ES']],
['Čeština', ['cs-CZ']],
['Deutsch', ['de-DE']],
['English', ['en-AU', 'Australia'],
['en-CA', 'Canada'],
['en-IN', 'India'],
['en-NZ', 'New Zealand'],
['en-ZA', 'South Africa'],
['en-GB', 'United Kingdom'],
['en-US', 'United States']],
['Español', ['es-AR', 'Argentina'],
['es-BO', 'Bolivia'],
['es-CL', 'Chile'],
['es-CO', 'Colombia'],
['es-CR', 'Costa Rica'],
['es-EC', 'Ecuador'],
['es-SV', 'El Salvador'],
['es-ES', 'España'],
['es-US', 'Estados Unidos'],
['es-GT', 'Guatemala'],
['es-HN', 'Honduras'],
['es-MX', 'México'],
['es-NI', 'Nicaragua'],
['es-PA', 'Panamá'],
['es-PY', 'Paraguay'],
['es-PE', 'Perú'],
['es-PR', 'Puerto Rico'],
['es-DO', 'República Dominicana'],
['es-UY', 'Uruguay'],
['es-VE', 'Venezuela']],
['Euskara', ['eu-ES']],
['Français', ['fr-FR']],
['Galego', ['gl-ES']],
['Hrvatski', ['hr_HR']],
['IsiZulu', ['zu-ZA']],
['Íslenska', ['is-IS']],
['Italiano', ['it-IT', 'Italia'],
['it-CH', 'Svizzera']],
['Magyar', ['hu-HU']],
['Nederlands', ['nl-NL']],
['Norsk bokmål', ['nb-NO']],
['Polski', ['pl-PL']],
['Português', ['pt-BR', 'Brasil'],
['pt-PT', 'Portugal']],
['Română', ['ro-RO']],
['Slovenčina', ['sk-SK']],
['Suomi', ['fi-FI']],
['Svenska', ['sv-SE']],
['Türkçe', ['tr-TR']],
['български', ['bg-BG']],
['Pусский', ['ru-RU']],
['Српски', ['sr-RS']],
['한국어', ['ko-KR']],
['中文', ['cmn-Hans-CN', '普通话 (中国大陆)'],
['cmn-Hans-HK', '普通话 (香港)'],
['cmn-Hant-TW', '中文 (台灣)'],
['yue-Hant-HK', '粵語 (香港)']],
['日本語', ['ja-JP']],
['Lingua latīna', ['la']]];
参考：
HTML5 中的 Web Speech API 支持哪些语言？
我建议您还检查Web语音API的浏览器兼容性。
只需执行
window.speechSynthesis.getVoices()在反应中你可以做
useEffect(() => {
if ('speechSynthesis' in window) {
window.speechSynthesis.onvoiceschanged = () => {
const supportedVoices = window.speechSynthesis.getVoices().map((voice) => {
return voice.lang
})
setSupportedLanguages(supportedVoices)
}
}
}, [])