diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js index 95da524..6fd7aad 100644 --- a/app/static/js/fillword.js +++ b/app/static/js/fillword.js @@ -1,6 +1,9 @@ let isRead = true; let isChoose = true; let reader = window.speechSynthesis; // 全局定义朗读者,以便朗读和暂停 +let cur_position = 0; // 朗读文本的当前位置 +let orig_position = 0; // 朗读文本的初始位置 +let to_speak = ""; // 朗读的初始内容 function getWord() { return window.getSelection ? window.getSelection() : document.selection.createRange().text; @@ -16,11 +19,38 @@ function fillInWord() { document.getElementById("text-content").addEventListener("click", fillInWord, false); -function read(s) { - let msg = new SpeechSynthesisUtterance(s); - reader.speak(msg); +function makeUtterance(str, rate) { + let msg = new SpeechSynthesisUtterance(str); + msg.rate = rate; + msg.lang = "en-US"; // TODO: add language options menu + msg.onboundary = ev => { + if (ev.name == "word") { + cur_position = ev.charIndex; + } + } + return msg; } +const sliderValue = document.getElementById("rangeValue"); // 显示值 +const inputSlider = document.getElementById("rangeComponent"); // 滑块元素 +inputSlider.oninput = () => { + let value = inputSlider.value; // 获取滑块的值 + sliderValue.textContent = value + '×'; + if (!reader.speaking) return; + reader.cancel(); + let msg = makeUtterance(to_speak.substring(orig_position + cur_position), value); + orig_position = orig_position + cur_position; + cur_position = 0; + reader.speak(msg); +}; + +function read(s) { + to_speak = s.toString(); + orig_position = 0; + cur_position = 0; + let msg = makeUtterance(to_speak, inputSlider.value); + reader.speak(msg); +} function onReadClick() { isRead = !isRead; diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index 19542c1..0396fb8 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -35,7 +35,14 @@ 生词高亮 大声朗读 划词入库 - +
+
+
+ +
+ +
+

收集生词吧 (可以在正文中划词,也可以复制黏贴)