0

当我在文本区域元素中输入内容然后单击阅读按钮时，什么也没有说出来。控制台不会抛出任何错误，我也无法确定我哪里出错了。我继续阅读“SpeechUtterance”MDN 文档，据我所知，我已经遵循了所有正确的步骤。请帮忙！

const read = document.getElementById("read");
const pause = document.getElementById("pause");
const stop = document.getElementById("stop");
const speed = document.getElementById("speed");
const text = document.getElementById("text");


read.addEventListener("click", () => {
  readText(text.value)
});

pause.addEventListener("click", () => {
  pauseText();
});


function readText(dummy) {
  var utterThis = new SpeechSynthesisUtterance(dummy);
  if(speechSynthesis.speaking && speechSynthesis.paused) {
    return speechSynthesis.resume()
  }

  if(speechSynthesis.speaking) return;

  console.log(utterThis)
  console.log(speechSynthesis)


  utterThis.text = dummy;
  utterThis.rate = speed.value
  text.disabled = true;
  speechSynthesis.speak(utterThis)
  utterThis.addEventListener("end", () => {
    text.disabled = false
  })
}

function pauseText() {
  if(speechSynthesis.speaking)  speechSynthesis.pause();
}
body {
  background-color: purple;
}


textarea {
  margin-top: 50px;
  margin: auto;
}

textarea:focus {
  background: green;

}

.container {
  display: flex;
  justify-content: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css">
    <title></title>
  </head>
  <body>
    <textarea id="text" name="name" rows="30" cols="100"></textarea>

    <div class="container">
      <label for="speed">Speed</label>
      <input id="speed" type="number" min="0" step="1" max="10">
      <button id="read" type="button" name="button">Read</button>
      <button id="pause" type="button" name="button">Pause</button>
      <button id="stop" type="button" name="button">Stop</button>
    </div>
  </body>
  <script src="index.js" charset="utf-8"></script>
</html>

4

0 回答 0