中国語リスニング練習用

readme.md

sample page

index.html

<input type="file" name="file" id="file" />
<div id="display">
  <div class="example" style="display: flex;">
    <p>你好</p>
    <button class="speak-btn" style="margin: 10;">再生</button>
  </div>
</div>

<script>
  function loadVoices() {
    var u = new SpeechSynthesisUtterance();
    u.lang = "zh-CN";
    var btns = document.querySelectorAll(".speak-btn");

    btns.forEach((e) => {
      e.onclick = function () {
        u.text = e.parentNode.querySelector("p").innerText;
        speechSynthesis.speak(u);

        u.onend = function (e) {
          console.log("speakTime: " + e.elapsedTime + "ms");
        };
      };
    });
  }

  const file = document.getElementById("file");
  const display = document.getElementById("display");
  const reader = new FileReader();
  loadVoices();

  file.addEventListener("change", (e) => {
    let fileData = e.target.files[0];
    if (fileData.type != "text/plain") {
      alert("file type should be 'text/plain'");
      return;
    }
    display.innerHTML = null;
    reader.readAsText(fileData, "UTF-8");
  });

  reader.addEventListener("load", () => {
    let data = [];
    let cols = reader.result.split(/\n/);
    for (let i = 0; i < cols.length; i++) {
      if (cols[i] == "") {
        continue;
      }
      var div = document.createElement("div");
      div.setAttribute("style", "display: flex;");

      var p = document.createElement("p");
      p.textContent = cols[i];

      var btn = document.createElement("button");
      btn.textContent = "再生";
      btn.setAttribute("class", "speak-btn");
      btn.setAttribute("style", "margin: 10;");

      div.appendChild(p);
      div.appendChild(btn);
      display.appendChild(div);
    }
    loadVoices();
  });
</script>