// 創(chuàng)建 SpeechSynthesisUtterance 對象
var speechUtterance = new SpeechSynthesisUtterance('Hello, how are you?');
// 創(chuàng)建 SpeechSynthesis 對象
var synthesis = window.speechSynthesis;
// 設(shè)置語音合成的事件處理函數(shù)
// 開始語音合成
speechUtterance.onstart = function(event) {
  console.log('Speech synthesis started.');
};
// 結(jié)束語音合成
speechUtterance.onend = function(event) {
  console.log('Speech synthesis ended.');
};
// 暫停語音合成
speechUtterance.onpause = function(event) {
  console.log('Speech synthesis paused.');
};
// 恢復(fù)語音合成
speechUtterance.onresume = function(event) {
  console.log('Speech synthesis resumed.');
};
// 分段語音合成
speechUtterance.onboundary = function(event) {
  console.log('Speech boundary reached at character index ' + event.charIndex + '.');
};
// 啟動語音合成
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  synthesis.speak(speechUtterance);
});

// 創(chuàng)建 SpeechRecognition 對象
var recognition = new window.SpeechRecognition();
// 設(shè)置語音識別的事件處理函數(shù)
// 開始語音識別
recognition.onstart = function(event) {
  console.log('Speech recognition started.');
};
// 結(jié)束語音識別
recognition.onend = function(event) {
  console.log('Speech recognition ended.');
};
// 識別到語音結(jié)果
recognition.onresult = function(event) {
  var transcript = event.results[0][0].transcript;
  console.log('Recognized speech: ' + transcript);
};
// 啟動語音識別
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  recognition.start();
});

<template>
  <div>
    <el-page-header @back="goBack" content="語音轉(zhuǎn)文字"/>
    <div class="bank"></div>
    <el-card header="語音轉(zhuǎn)文字">
      <el-card>
        <el-input :readonly="true" id="word" v-model="word"></el-input>
      </el-card>
      <el-card>
        <el-button type="primary" @click="audioCHangeWord"><span v-if="isListening">語音識別中...</span><span v-else>語音識別</span></el-button>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AudioToWord",
  data() {
    return {
      word: "",
      isListening: false, // 判斷是否在語音監(jiān)聽中
    }
  },
  methods: {
    audioCHangeWord() { 
      var that = this;
      that.word = "";
      // 創(chuàng)建SpeechRecognition對象
      // eslint-disable-next-line no-undef
      var recognition = new webkitSpeechRecognition();
      if (!recognition) { 
        // eslint-disable-next-line no-undef
        recognition = new SpeechRecognition();
      }
      // 設(shè)置語言
      recognition.lang = 'zh-CN';
      // 開始語音識別
      recognition.start();
      that.isListening = true;
      // 監(jiān)聽識別結(jié)果
      recognition.onresult = function (event) {
        var result = event.results[0][0].transcript;
        that.word = result;
      };
      // 監(jiān)聽錯誤事件
      recognition.onerror = function (event) {
        that.isListening = false;
        that.$message("監(jiān)聽語音失敗:"+event.error);
        console.error(event.error);
      };
      // 監(jiān)聽結(jié)束事件（包括識別成功、識別錯誤和用戶停止）
      recognition.onend = function () {
        that.isListening = false;
        console.log("語音識別停止");
      };
    },
    goBack() {
      this.$router.push({ path: "/entry" })
    }
  }
}
</script>

<template>
  <div>
    <el-page-header @back="goBack" content="文字轉(zhuǎn)語音"/>
    <div class="bank"></div>
    <el-card header="文字轉(zhuǎn)語音">
      <el-input
        id="word"
        type="textarea"
        placeholder="請輸入文本"
        v-model="word"
        maxlength="300"
        rows="4"
        show-word-limit
      >
      </el-input>
      <div class="bank"></div>
      <el-card>
        <el-button @click="changeToAudio" type="primary">轉(zhuǎn)為語音</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
          <el-button @click="pause" type="warning">暫停</el-button>
          <el-button @click="resume" type="success">繼續(xù)</el-button>
          <el-button @click="cancel" type="info">取消</el-button>
      </el-card>
      <div class="bank"></div>
      <el-card>
        <el-button @click="getvoice" type="primary">獲取語音合成數(shù)據(jù)(F12)</el-button>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "WordToAudio",
  data() {
    return {
      word: "",
      isPaused: false, // 判斷是否暫停
    }
  },
  methods: {
    // 選
    changeToAudio() {
      if (!this.word) {
        this.$message("請輸入文本");
        return;
      }
      if (this.isPaused) {
        this.$message("當前語音已暫停,請點擊繼續(xù)!");
        return;
      } else if (window.speechSynthesis.speaking) {
        this.$message("當前已有正在播放的語音!");
        return;
      }
      // 為了防止在暫停狀態(tài)下轉(zhuǎn)語音，調(diào)用前設(shè)置繼續(xù)播放
      window.speechSynthesis.resume();
      // 設(shè)置播放
      var textArea = document.getElementById('word');
      var range = document.createRange();
      range.selectNodeContents(textArea);
      var speech = new SpeechSynthesisUtterance();
      speech.text = this.word; // 內(nèi)容
      speech.lang = "zh-cn"; // 語言
      speech.voiceURI = "Microsoft Huihui - Chinese (Simplified, PRC)"; // 聲音和服務(wù)
      // eslint-disable-next-line no-irregular-whitespace
      speech.volume = 0.7; // 聲音的音量區(qū)間范圍是??0???到??1默認是??1??
      // eslint-disable-next-line no-irregular-whitespace
      speech.rate = 1; // 語速，數(shù)值，默認值是??1???，范圍是??0.1???到??10???，表示語速的倍數(shù)，例如??2??表示正常語速的兩倍
      // eslint-disable-next-line no-irregular-whitespace
      speech.pitch = 1; // 表示說話的音高，數(shù)值，范圍從??0???（最小）到??2???（最大）。默認值為??1??。
      window.speechSynthesis.speak(speech);
      var highlight = document.createElement('span');
      highlight.style.backgroundColor = 'red';
      range.surroundContents(highlight);
    },
    // 暫停
    pause() {
      this.isPaused = true;
      window.speechSynthesis.pause();
    },
    // 繼續(xù)
    resume() {
      this.isPaused = false;
      window.speechSynthesis.resume();
    },
    // 取消
    cancel() {
      window.speechSynthesis.cancel();
    },
    getvoice() {
      console.log(window.speechSynthesis.getVoices());
    },
    goBack() { 
      this.$router.push({path: "/entry"})
    }
  }
}
</script>
<style>
.bank {
  padding: 10px;
}
</style>