add slider of speech-rate

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) {
+function makeUtterance(str, rate) {
-    let msg = new SpeechSynthesisUtterance(s);
+    let msg = new SpeechSynthesisUtterance(str);
-    reader.speak(msg);
+    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;

app/templates/userpage_get.html

@@ -35,7 +35,14 @@
     <input type="checkbox" onclick="ChangeHighlight()" checked/>生词高亮
     <input type="checkbox" onclick="onReadClick()" checked/>大声朗读
     <input type="checkbox" onclick="onChooseClick()" checked/>划词入库
-
+    <div class="range">
+        <div class="field">
+            <div class="sliderValue">
+                <span id="rangeValue">1×</span>
+            </div>
+        <input type="range" id="rangeComponent" min="0.5" max="2" value="1" step="0.25" "/>
+        </div>
+    </div>    
     <p><b>收集生词吧</b> （可以在正文中划词，也可以复制黏贴）</p>
     <form method="post" action="/{{ username }}">
         <textarea name="content" id="selected-words" rows="10" cols="120"></textarea><br/>