1. 程式人生 > >speechSynthesis,TTS語音合成。

speechSynthesis,TTS語音合成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>語音朗讀</title>
    <style>
        body{
            padding: 20px;
        }
        textarea{
            width: 100%;
            height: 260px;
        }
    </style>
</head>
<body>
<textarea name=""  cols="30" rows="10" id="sppekContent" placeholder="輸入一些內容試試..."></textarea>
<a href="javascript:;" id="du">朗讀</a>
<a href="javascript:;" id="zanting">暫停</a>
<a href="javascript:;" id="chongxing">重新開始</a>
<a href="javascript:;" id="stop">停止</a>
<script>
  window.onload=function () {
      /**
       * @returns {{start: start, pause: pause, resume: resume, stop: stop}}
       */
      function speek(){
          let speechInstance = new SpeechSynthesisUtterance();
          // console.log(speechInstance);
          // console.log(speechSynthesis.getVoices());
          return {
              /**
               * @param opitions {container:'',Lang:''}
               */
              start:function (opitions) {
                  let container=opitions.container;
                  let lang=opitions.Lang===undefined||""?"zh-CN":opitions.Lang;
                  let content=document.querySelector(container).value;
                  if(content!='') {
                      speechInstance.text = content;
                      speechInstance.lang = lang;
                      speechSynthesis.speak(speechInstance);
                  }else{
                      console.log("請輸入內容");
                  }
              },
              pause:function () {
                  speechSynthesis.pause();//暫停
              },
              resume:function(){
                 speechSynthesis.resume();//重新開始
              },
              stop:function () {
                  speechSynthesis.cancel();//結束
              }
          }
      }

      document.querySelector("#du").onclick=function () {
          speek().start({container:"#sppekContent",Lang:''});
      };
      document.querySelector("#zanting").onclick=function () {
          speek().pause();
      };
      document.querySelector("#chongxing").onclick=function () {
          speek().resume();
      };
      document.querySelector("#stop").onclick=function () {
          speek().stop();
      }
  }

</script>
</body>
</html>