From 03ccb3527a94a3c463b4bffe24ba0f579f286d5f Mon Sep 17 00:00:00 2001 From: Xunflash Date: Thu, 25 May 2023 17:35:31 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=89=8D=E7=AB=AF=E9=98=85?= =?UTF-8?q?=E8=AF=BBjs=EF=BC=8C=E6=96=B0=E5=A2=9E=E9=98=85=E8=AF=BB?= =?UTF-8?q?=E5=99=A8=E5=85=A8=E5=B1=80=E5=AF=B9=E8=B1=A1=EF=BC=8C=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E7=94=9F=E8=AF=8D=E6=9C=97=E8=AF=BB=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/static/config.yml | 2 ++ app/static/js/fillword.js | 45 +++------------------------------ app/static/js/read.js | 36 ++++++++++++++++++++++++++ app/static/js/word_operation.js | 8 ++++++ app/templates/userpage_get.html | 1 + 5 files changed, 51 insertions(+), 41 deletions(-) create mode 100644 app/static/js/read.js diff --git a/app/static/config.yml b/app/static/config.yml index 20aa396..7b2b3eb 100644 --- a/app/static/config.yml +++ b/app/static/config.yml @@ -7,7 +7,9 @@ css: js: head: # 在页面加载之前加载 - static/js/jquery.js + - static/js/read.js - static/js/word_operation.js + bottom: # 在页面加载完之后加载 - static/js/fillword.js - static/js/highlight.js diff --git a/app/static/js/fillword.js b/app/static/js/fillword.js index ba249dd..b967633 100644 --- a/app/static/js/fillword.js +++ b/app/static/js/fillword.js @@ -1,9 +1,5 @@ let isRead = true; let isChoose = true; -let reader = window.speechSynthesis; // 全局定义朗读者，以便朗读和暂停 -let current_position = 0; // 朗读文本的当前位置 -let original_position = 0; // 朗读文本的初始位置 -let to_speak = ""; // 朗读的初始内容 function getWord() { return window.getSelection ? window.getSelection() : document.selection.createRange().text; @@ -11,7 +7,7 @@ function getWord() { function fillInWord() { let word = getWord(); - if (isRead) read(word); + if (isRead) Reader.read(word, inputSlider.value); if (!isChoose) return; const element = document.getElementById("selected-words"); element.value = element.value + " " + word; @@ -19,50 +15,17 @@ function fillInWord() { document.getElementById("text-content").addEventListener("click", fillInWord, false); -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") { - current_position = ev.charIndex; - } - } - return msg; -} - -const sliderValue = document.getElementById("rangeValue"); // 显示值 -const inputSlider = document.getElementById("rangeComponent"); // 滑块元素 +const sliderValue = document.getElementById("rangeValue"); +const inputSlider = document.getElementById("rangeComponent"); inputSlider.oninput = () => { - let value = inputSlider.value; // 获取滑块的值 + let value = inputSlider.value; sliderValue.textContent = value + '×'; - if (!reader.speaking) return; - reader.cancel(); - let msg = makeUtterance(to_speak.substring(original_position + current_position), value); - original_position = original_position + current_position; - current_position = 0; - reader.speak(msg); }; -function read(s) { - to_speak = s.toString(); - original_position = 0; - current_position = 0; - let msg = makeUtterance(to_speak, inputSlider.value); - reader.speak(msg); -} - function onReadClick() { isRead = !isRead; - if (!isRead) { - reader.cancel(); - } } function onChooseClick() { isChoose = !isChoose; } - -function stopRead() { - reader.cancel(); -} \ No newline at end of file diff --git a/app/static/js/read.js b/app/static/js/read.js new file mode 100644 index 0000000..83c18fb --- /dev/null +++ b/app/static/js/read.js @@ -0,0 +1,36 @@ +// read.js +var Reader = (function() { + let reader = window.speechSynthesis; + let current_position = 0; + let original_position = 0; + let to_speak = ""; + + function makeUtterance(str, rate) { + let msg = new SpeechSynthesisUtterance(str); + msg.rate = rate; + msg.lang = "en-US"; + msg.onboundary = ev => { + if (ev.name == "word") { + current_position = ev.charIndex; + } + } + return msg; + } + + function read(s, rate) { + to_speak = s.toString(); + original_position = 0; + current_position = 0; + let msg = makeUtterance(to_speak, rate); + reader.speak(msg); + } + + function stopRead() { + reader.cancel(); + } + + return { + read: read, + stopRead: stopRead + }; +})(); diff --git a/app/static/js/word_operation.js b/app/static/js/word_operation.js index ea6a6e8..f043cce 100644 --- a/app/static/js/word_operation.js +++ b/app/static/js/word_operation.js @@ -62,6 +62,13 @@ function delete_word(theWord) { }); } +function read_word(theWord) { + let to_speak = $("#word_" + theWord).text(); + original_position = 0; + current_position = 0; + Reader.read(to_speak, inputSlider.value); +} + /* * interface Word { * word: string, @@ -95,6 +102,7 @@ function wordTemplate(word) { 熟悉 不熟悉 删除 + 朗读

`; } diff --git a/app/templates/userpage_get.html b/app/templates/userpage_get.html index b5e16aa..0f3c720 100644 --- a/app/templates/userpage_get.html +++ b/app/templates/userpage_get.html @@ -131,6 +131,7 @@ 熟悉 不熟悉 删除 + 朗读

{% endfor %}