首頁 > web前端 > Vue.js > 步驟詳解Vue怎麼實現語音播報(附代碼)

步驟詳解Vue怎麼實現語音播報(附代碼)

藏色散人
發布: 2022-11-14 20:29:02
轉載
4814 人瀏覽過

vue怎麼實現點擊按鈕後進行語音播報?只要使用這個插件就行!以下就帶大家詳細了解Vue中怎麼使用speak-tts插件實現點擊按鈕後進行語音播報,本文附有詳細實例代碼哦,希望對需要的朋友大家有所幫助,歡迎學習!

步驟詳解Vue怎麼實現語音播報(附代碼)

Vue中使用speak-tts外掛實現點擊按鈕後進行語音播報(TTS/文字轉語音)

場景

speak-tts外掛

https://www.npmjs.com/package/speak-tts(學習影片分享: vue視訊教學

 

實現點擊按鈕觸發語音播報,播報指定的文字內容。

為什麼不能實現自動語音播報。

chrome瀏覽器在18年4月起,就在桌面瀏覽器全面禁止了音視頻的自動播放功能。

嚴格地來說,是Chrome不允許在使用者對網頁進行觸發之前播放音訊。

不光是這樣,在頁面載入完畢的情況下,使用者沒有click、dbclick、touch等主動互動行為,

使用js直接呼叫.play() 方法的話,chrome都會拋出以下錯誤:Uncaught (in promise) DOMException;

實作

1、參考官方說明安裝依賴

npm install speak-tts
登入後複製

2、在頁面中引入

import Speech from 'speak-tts'
登入後複製

3、聲明speech物件

  data() {    return {
      speech: null,
    };
登入後複製

4、頁面加載完畢調用初始化方法

mounted() {
    this.speechInit();
  },
  methods: {
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
登入後複製

5、頁面新增按鈕

<el-button type="success" @click="speakTtsSpeech">speak-tts语音播报</el-button>
登入後複製

6、按鈕點擊事件中呼叫播放方法

    speakTtsSpeech() {      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },
登入後複製

################################################################ #7、完整範例程式碼###

<script>
import Speech from "speak-tts"; // es6
export default {
  name: "SpeechDemo",
  data() {
    return {
      speech: null,
    };
  },
  mounted() {
    this.speechInit();
  },
  methods: {
    speakTtsSpeech() {
      this.speech.speak({ text: "公众号:霸道的程序猿" }).then(() => {
        console.log("读取成功");
      });
    },
    speechInit() {
      this.speech = new Speech();
      this.speech.setLanguage("zh-CN");
      this.speech.init().then(() => {});
    },
  },
};
</script>