<template>
<div>
<el-button @ click = " speak " > 播放 </el-button>
<el-button @ click = " pause " > 暂停 </el-button>
<el-button @ click = " resume " > 继续播放 </el-button>
<el-button @ click = " cancel " > 取消播放 </el-button>
</div>
</template>
<script>
const synth = window . speechSynthesis ;
var speech = new SpeechSynthesisUtterance ();
export default {
data () {
return {
timer: null ,
i: 0 ,
message: [
"南通报警" ,
"北京报警"
]
};
},
methods: {
speak () {
// for (let i = 0; i < this.message.length; i++) {
// this.i = 0;
console . log ( synth . getVoices ());
let voices = synth . getVoices ();
speech . pitch = 1 ; // 获取并设置话语的音调(值越大越尖锐,越低越低沉)
speech . rate = 3 ; // 获取并设置说话的速度(值越大语速越快,越小语速越慢)
speech . voice = voices [ 0 ]; // 获取并设置说话的声音,感觉跟设置播放语言类似
speech . volume = 1 ; // 获取并设置说话的音量
// speech.lang = 'zh-CN' // 设置播放语言
// speech.cancel() // 删除队列中所有的语音.如果正在播放,则直接停止
speech . text = this . message ; // 获取并设置说话时的文本
synth . speak ( speech );
if ( this . i == 1 ) {
clearTimeout ( this . timer );
} else {
this . timer = setTimeout (() => {
this . i ++ ;
this . speak ();
}, 1000 );
}
// }
},
// 暂停
pause () {
synth . pause ();
},
// 继续播放
resume () {
synth . resume ();
},
// 取消播放
cancel () {
synth . cancel ();
}
}
};
</script>