<div class="Box">
<div class="article">
<div class="btnGroup">
<i :class="btnClassName" @click="ctrlAudio"></i>
</div>
<div v-html="text"></div>
</div>
</div>
懂得都懂!!!
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
data() {
return {
text: '',
btnClassName: 'el-icon-video-play',
//用于存放语音实体和队列实体
audio: {
synth: '',
utterance1:''
}
};
},
computed: {
// 获取id,用于获取文章
rankInfoId() {
return this.$store.state.rightMaskTemporaryData.id
}
},
mounted() {
this.getTextArr();
},
methods: {
//控制语音播放、暂停,同时更改图标
ctrlAudio() {
if (this.btnClassName == 'el-icon-video-pause') {
this.audio.synth.pause();
this.btnClassName = 'el-icon-video-play'
} else {
this.btnClassName = 'el-icon-video-pause'
this.audio.synth.resume()
}
},
//获取文章内容,用于渲染
getTextArr() {
MB_INFO({
groupId: this.rankInfoId
}).then(msg => {
console.log(msg);
this.getArticle(msg.data);
})
},
//生成html 用于元素渲染
getArticle(arr) {
this.text = "";
for (let a of arr) {
this.text +=
`
<div class="audio audio_${a.id} ${a.infotype_code}" >
${a.info}
</div>`
}
var domFlag = {};
//语音播放代码
this.audio.synth = window.speechSynthesis;
//新建实例
this.audio.synth.cancel();
//语音开始前先取消上一个
this.btnClassName = 'el-icon-video-play'
//循环添加到队列
for (let b of arr) {
this.audio.utterance1 = new SpeechSynthesisUtterance(b.info);
this.audio.synth.speak(this.audio.utterance1);
this.btnClassName = 'el-icon-video-pause'
//
this.audio.utterance1.onstart = function (e) {
domFlag = {}
domFlag = {
type: b.codeName,
typeCode: b.typeCode,
id: b.id,
groupId:b.groupId
};
zlsMapTool.lunboTool(domFlag.groupId,domFlag.type);
}
//每个语音播报结束后的行为
this.audio.utterance1.addEventListener('end', () => {
domFlag = {}
})
}
}
},
beforeDestroy() {
this.audio.synth.cancel();
layer.close(layerIndexByLunbo)
}