前端實現語音合成

前言

語音合成的實現方式有多種：
第一種：HTML5語音Web Speech API
第二種：百度文字轉語音開放API
第三種：微軟TTS引擎（沒有實際使用，此文章就不多贅述）

實現方式（vue環境）

一、HTML5語音Web Speech API

Web Speech有兩類API：

1.語音合成（Speech Synthesis） -----------> 文字變語音
2.語音識別（Speech Recognition）-----------> 語音轉文字

兼容性傳送帶

語音合成Speech Synthesis API的核心：SpeechSynthesisUtterance和speechSynthesis

代碼實現

 	<a-button @click="voicePlay">
    	<a-icon type="play-circle" />播放
    </a-button>
 
    const msg = new SpeechSynthesisUtterance()  //構建語音合成實例
    const synth = window.speechSynthesis //觸發行爲
    handleSpeak(text) {
      msg.text = text
      msg.lang = 'zh-CN'
      msg.volume = '1'
      msg.rate = 1
      msg.pitch = 1
      synth.speak(msg)
    },
    voicePlay() {
      //語音合成播放
      this.handleSpeak("需要播放的文字")
      console.log(speechSynthesis.getVoices())   //返回瀏覽器支持的語音包列表數組
    },

SpeechSynthesisUtterance對象

實例對象的屬性
/**
* text – 要合成的文字內容，字符串
* lang – 使用的語言，字符串， 例如：“zh-CN”
* voiceURI – 指定希望使用的聲音和服務，字符串
* volume – 聲音的音量，區間範圍是0到1，默認是1
* rate – 語速，數值，默認值是1，範圍是0.1到10，表示語速的倍數，例如2表示正常語速的兩倍。
* pitch – 表示說話的音高，數值，範圍從0（最小）到2（最大）。默認值爲1
/
實例對象的方法
/**
* onstart – 語音合成開始時候的回調。
* onpause – 語音合成暫停時候的回調。
* onresume – 語音合成重新開始時候的回調。
* onend – 語音合成結束時候的回調。
*/

speechSynthesis對象

方法
/**
* speak() – 只能接收SpeechSynthesisUtterance作爲唯一的參數，作用是讀合成的話語
* stop() – 立即終止合成過程
* pause() – 暫停合成過程
* cancel() – 接口從話語隊列中刪除所有的話語
* resume() – 重新開始合成過程
* getVoices – 此方法不接受任何參數，用來返回瀏覽器支持的語音包列表數組
*/

二、百度文字轉語音開放API

接口：http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=轉換的文字

屬性
/**
* lan=zh – 語言是中文，如果改爲lan=en，則語言是英文
* ie=UTF-8 – 文字格式
* spd=2 – 語速，可以是1-9的數字，數字越大，語速越快
* text=** – 需要轉換的文字
*/

代碼實現

	voicePlay() {
      let ttsText = 需要轉換的文字;
      this.$audio.src = 'http://tts.baidu.com/text2audio?lan=Zh&ie=UTF-8&spd=4&text=' + ttsText;
      this.$audio.play();
    }

總結：由於工作需求需要獲得播放路徑，選擇了百度api，如果有了解Web Speech API如何獲取播放路徑的歡迎留言補充~ O(∩_∩)O