js_update_ipa_output = """
function updateCssText(text, letters) {
let wordsArr = text.split(" ")
let lettersWordsArr = letters.split(" ")
let speechOutputContainer = document.querySelector('#speech-output');
speechOutputContainer.textContent = ""
for (let idx in wordsArr) {
let word = wordsArr[idx]
let letterIsCorrect = lettersWordsArr[idx]
for (let idx1 in word) {
let letterCorrect = letterIsCorrect[idx1] == "1"
let containerLetter = document.createElement("span")
containerLetter.style.color = letterCorrect ? 'green' : "red"
containerLetter.innerText = word[idx1];
speechOutputContainer.appendChild(containerLetter)
}
let containerSpace = document.createElement("span")
containerSpace.textContent = " "
speechOutputContainer.appendChild(containerSpace)
}
}
"""
js_play_audio = """
function playAudio(text, language) {
let voice_idx = 0;
let voice_synth = null;
let synth = window.speechSynthesis;
let voice_lang;
function setSpeech() {
return new Promise(
function (resolve, reject) {
let id;
id = setInterval(() => {
if (synth.getVoices().length !== 0) {
resolve(synth.getVoices());
clearInterval(id);
}
}, 10);
}
)
}
switch (language) {
case 'de':
voice_lang = 'de-DE';
break;
case 'en':
voice_lang = 'en-US';
break;
default:
console.log(`Sorry, we are out of ${expr}.`);
throw new Error(`Language ${language} not valid!`)
alert(`Language ${language} not valid!`)
}
let s = setSpeech();
s.then((voices) => {
let voicesSynth = voices.filter(voice => voice.lang === voice_lang);
if (voicesSynth.length === 0) {
console.error(`No voice found for language ${voice_lang}, retry for less restrictive check (startsWith)...`)
voicesSynth = voices.filter(voice => voice.lang.startsWith(language));
}
if (voicesSynth.length === 0) {
msg = `Error: no voice found for language ${voice_lang} / ${language}, you should use the Text-To-Speech backend feature...`
alert(msg)
throw new Error(msg)
}
var utterThis = new SpeechSynthesisUtterance(text);
utterThis.voice = voicesSynth[0];
utterThis.rate = 0.7;
synth.speak(utterThis);
// todo: capture audio from speech synthesis to reuse on the frontend
// https://stackoverflow.com/questions/45003548/how-to-capture-generated-audio-from-window-speechsynthesis-speak-call
});
}
"""
head_driver_tour = """
"""