最近在实际开发遇到如下场景,需要根据后端返回的文本来实现语音播报。
解决办法如下:👇
以下是一个示例:
- 首先,安装speak-tts插件:
npm install speak-tts 或者 yarn add speak-tts
- 在需要使用语音播报的组件中引入speak-tts:
import SpeakTts from 'speak-tts'
export default {
data() {
return {
tts: new SpeakTts()
}
},
methods: {
speak(text) {
this.tts.speak({
text: text,
queue: false,
listeners: {
onend: () => {
console.log('finished speaking')
}
}
})
}
}
}
- 在需要进行语音播报的地方调用
speak()
方法即可:
this.speak('需要播报的文字') // 如果做了国际化,传入英文也能播报
以下是楼主的示例代码:👇
<script>
import SpeakTts from 'speak-tts'
export default {
name: '',
data() {
return {
tts: new SpeakTts(),
}
},
mounted() {
this.speak('please speak something')
},
methods: {
speak(text) {
this.tts.speak({
text: text,
queue: false,
listeners: {
onend: () => {
console.log('finished speaking')
}
}
})
},
}
}
</script>
最后附上相关资料链接: