vue中实现语音播放、暂停、结束监听等

最新推荐文章于 2025-02-24 00:00:00 发布

bushichengxuyuana

最新推荐文章于 2025-02-24 00:00:00 发布

阅读量2.6k

点赞数 1

分类专栏：我的新能力文章标签： vue.js javascript 前端实时音视频

本文链接：https://blog.csdn.net/weixin_43997182/article/details/129354849

版权

我的新能力专栏收录该内容

5 篇文章

订阅专栏

<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)
    }