[Feature] Web Speech API in Javascript #8794
Description
As a solution to all the functional requirements related to TTS, I would like to propose support for the Web Speech API in JavaScript.
By supporting the Web Speech API, it will be possible to realize the speech behavior of the cloze-only tag, place the speech button in the card, and speak the text multiple times at different speeds using JavaScript on the user side.
This has the advantage of keeping the application side simple by leaving the implementation of overly complex functions related to TTS to the user's JavaScript side.
Below is the sample code.
<p><select id="voice"></select></p>
<p><textarea id="textarea">This is TTS test.</textarea></p>
<p><button id="button1">Speak</button>
<button id="button2">Stop</button></p>
<script>
// CC0 http://creativecommons.org/publicdomain/zero/1.0/
if (window.speechSynthesis) {
let voices = [];
function setVoices() {
if (voices.length) return;
voices = speechSynthesis.getVoices();
if (!voices.length) return;
voices
.filter(v => v.lang.startsWith("en"))
.forEach(v => {
let opt = document.createElement("option");
opt.text = v.name;
opt.voice = v;
voice.appendChild(opt);
});
}
speechSynthesis.addEventListener("voiceschanged", setVoices);
setVoices();
}
button1.addEventListener("click", () => {
let opt = voice.selectedOptions;
if (!opt.length) return;
let u = new SpeechSynthesisUtterance(textarea.value);
u.voice = opt[0].voice;
u.lang = u.voice.lang;
u.addEventListener("boundary", e => {
if (e.name != "word") return;
textarea.focus();
textarea.setSelectionRange(e.charIndex, e.charIndex + e.charLength);
});
u.addEventListener("end", () => textarea.setSelectionRange(0, 0));
speechSynthesis.speak(u);
});
button2.addEventListener("click", () => {
if (!window.speechSynthesis) return;
speechSynthesis.cancel();
});
</script>I've also prepared a page where you can easily try out the code.
https://codepen.io/mikunimaru/pen/poevqKq
The above code is executable in my android browser, so I think android is capable of supporting Web Speech API.