Vue如何實現(xiàn)語音播報

這篇文章主要介紹“Vue如何實現(xiàn)語音播報”，在日常操作中，相信很多人在Vue如何實現(xiàn)語音播報問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue如何實現(xiàn)語音播報”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

Vue中使用speak-tts插件實現(xiàn)點擊按鈕后進行語音播報(TTS/文字轉(zhuǎn)語音)

場景

speak-tts插件

實現(xiàn)點擊按鈕觸發(fā)語音播報，播報指定的文字內(nèi)容。

為什么不能實現(xiàn)自動語音播報。

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

嚴格地來說，是Chrome不允許在用戶對網(wǎng)頁進行觸發(fā)之前播放音頻。

不光是這樣，在頁面加載完畢的情況下，用戶沒有click、dbclick、touch等主動交互行為，

使用js直接調(diào)用.play() 方法的話，chrome都會拋出如下錯誤：Uncaught (in promise) DOMException；

實現(xiàn)

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

npm install speak-tts

2、在頁面中引入

import Speech from 'speak-tts'

3、聲明speech對象

  data() {    return {
      speech: null,
    };

4、頁面加載完調(diào)用初始化方法

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、按鈕點擊事件中調(diào)用播放方法

    speakTtsSpeech() {      this.speech.speak({ text: "公眾號:霸道的程序猿" }).then(() => {
        console.log("讀取成功");
      });
    },

7、完整示例代碼

<template>
  <el-button type="success" @click="speakTtsSpeech">speak-tts語音播報</el-button>
</template>
<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>

<style scoped>
</style

到此，關(guān)于“Vue如何實現(xiàn)語音播報”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>