VUE 文字轉語音播放的實現示例

Posted on by

一、技術：Web Speech API

Web Speech API​​ 使您能夠將語音數據合並到 Web 應用程序中。

Web Speech API 有兩個部分：SpeechSynthesis 語音合成 （文本到語音 TTS）和 SpeechRecognition  語音識別（異步語音識別）。

二、語音合成及發音接口

​ ​SpeechSynthesis​​：語音合成服務的控制器接口，可用於獲取設備上可用的合成語音，開始、暫停以及其它相關命令的信息。

​ ​SpeechSynthesisUtterance​​：表示一次發音請求。其中包含瞭將由語音服務朗讀的內容，以及如何朗讀它（例如：語種、音高、音量）。

三、vue項目案例

<template>
    <button @click="playVoice">播放語音</button>
</template>
<script>
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();
export default {
  data() {
    return {};
  },
  methods: {
    playVoice() {
      this.handleSpeak('小朋友，你是否有很多問號') // 傳入需要播放的文字
    },
    // 語音播報的函數
    handleSpeak(text) {
      msg.text = text;     // 文字內容: 小朋友，你是否有很多問號
      msg.lang = "zh-CN";  // 使用的語言:中文
      msg.volume = 1;      // 聲音音量：1
      msg.rate = 1;        // 語速：1
      msg.pitch = 1;       // 音高：1
      synth.speak(msg);    // 播放
    },
    // 語音停止
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      synth.cancel(msg);
    }
  }
};
</script>

到此這篇關於VUE 文字轉語音播放的實現示例的文章就介紹到這瞭,更多相關VUE 文字轉語音內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：