場景

點擊界面語音播報按鈕，電腦進行語音播報

安裝

npm install speak-tts

引用

import Speech from 'speak-tts'

使用

<template><i class="el-icon-microphone" @click="play()" ></i><i class="el-icon-video-pause" @click="paused()"></i> <i class="el-icon-video-play" @click="goahead()" ></i> </template><script> import Speech from 'speak-tts' data () {return {speech:null} }, mounted(){this.SpeechInit() }, methods:{SpeechInit(){this.speech = new Speech() this.speech.setLanguage('zh-CN')this.speech.init().then(()=>{})},//播放按鈕play(){this.speech.speak({text:"收款40萬元"，listeners: {//開始播放onstart: () => { console.log("Start utterance")},//判斷播放是否完畢onend: () => { console.log("End utterance")},//恢復播放onresume: () => { console.log("Resume utterance") },},}).then(()=>{console.log("讀取成功")})},//暫停paused() {this.speech.pause();},//從暫停處繼續播放goahead() {this.speech.resume();}, }, //離開頁面取消語音destroyed() {this.speech.cancel();}, </script>

轉載文章
官方文檔

總結

以上是生活随笔為你收集整理的Vue使用speak-tts插件实现后台管理系统语音播报功能的全部內容，希望文章能夠幫你解決所遇到的問題。

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