<template>
<div>
<button @click="toggleSpeech">{{ isPlaying ? '暂停' : '播放' }}</button>
<div>{{ displayedText }}</div>
</div>
</template>
<script>
var plugin = requirePlugin("WechatSI")
export default {
data() {
return {
text: '需要展示的文字',
displayedText: '',
isPlaying: false,
index: 0,
intervalId: null,
audioContext: null,
plugin :plugin
};
},
methods: {
// 切换语音播报状态(播放/暂停)
toggleSpeech() {
if (this.isPlaying) {
this.pauseSpeech();
} else {
this.startSpeech();
}
},
// 开始语音播报
startSpeech() {
if (this.isPlaying) return;
this.isPlaying = true;
this.displayedText = '';
this.index = 0;
//获取音频的url
this.plugin.textToSpeech({
lang: "zh_CN",
tts: true, //启动文本转语音功能
content: this.text,
success:(res)=>{
this.audioContext = uni.createInnerAudioContext();
this.audioContext.src = res.filename;
this.audioContext.play();
}
})
this.intervalId = setInterval(() => {
if (this.index >= this.text.length) {
this.pauseSpeech();
return;
}
this.displayedText += this.text[this.index];
this.index++;
}, 500); // 逐个展示字的间隔时间(单位: 毫秒)
},
// 暂停语音播报
pauseSpeech() {
if (!this.isPlaying) return;
this.isPlaying = false;
this.audioContext && this.audioContext.pause();
clearInterval(this.intervalId);
uni.pauseVoice(); // 暂停语音播报
}
},
beforeDestroy() {
this.pauseSpeech();
}
}
</script>
uniapp开发微信小程序时实现文字转语音播报 播报时一个字展示一个字 并有暂停语音的功能
最新推荐文章于 2024-04-02 11:27:30 发布