場景

speak-tts插件

speak-tts - npm

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

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

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

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

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

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

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓氣質_CSDN博客-C#,SpringBoot,架構之路領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

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、完整示例代碼

<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>

總結

以上是生活随笔為你收集整理的Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。