vue 实现语音播报
语音播放10次
<script>
let synth;
let msgSetting;
export default {
data() {
return {
numstateAll : 10, // 播放10次
numsynthAll : 0, // 记录播放次数
};
},
mounted() {
synth = window.speechSynthesis; // 该对象是使用Web Speech API语音合成功能的入口点
msgSetting = new SpeechSynthesisUtterance(); // 创建文本实例
let that = this;
this.handleSpeak("机器人出现了故障,请检查机器人"); // 传入需要播放的文字
// 监听 语音播放完成
msgSetting.onend = function (event) {
console.log("语音播报完成");
that.numsynthAll++;
if (that.numsynthAll < that.numstateAll) {
console.log("继续播放");
that.handleSpeak("机器人出现了故障,请检查机器人");
} else {
console.log("结束播放");
that.handleStop();
that.numsynthAll = 0;
return;
}
};
},
methods: {
// 开始播放
handleSpeak(text) {
msgSetting.text = text; // 文字内容
msgSetting.lang = "zh-CN"; // 使用的语言:中文
msgSetting.volume = 6; // 音量:1
msgSetting.rate = 1; // 语速:1
msgSetting.pitch = 3; // 音高:1
synth.speak(msgSetting); // 播放
},
// 停止播放
handleStop(e) {
synth.cancel(msgSetting);
}
},
};
</script>
完成!复制代码直接用!