vue 播放音频

<el-row>
    <audio ref="audio" @canplay="play_star" @pause="pause_event" :src="music_path">
        <source src="" type="audio/wav">
        <source src="" type="audio/mpeg">
    </audio>
</el-row>

js 代码
两个事件,两个方法
一个开始播放事件,
一个暂停事件
一个获取音频路径的方法
一个点击事件,进行暂停和播放

play_star(){
                // this.$refs.audio.load();
                if (this.click_play){
                    let aa1 = this.$refs.audio.duration;
                    this.$message({
                        message: aa1,
                        type: 'success'
                    });
                    // console.log(this.$refs.audio.duration)
                }
            },
            get_record_path(){
                let abc = 'http://m10.music.126.net/20191215175552/30028a9338ba308434d95363d04e83a9/ymusic/25f5/77be/0264/427ec62ea7b1030f6fe5f9a4b84c9c83.mp3';
                return abc
            },
            // 播放
            aclick(){
                let path = this.get_record_path();

                let aa = this.$refs.audio.src;
                if (typeof aa === 'undefined' && aa === ''){
                    // 判断是否为空
                    this.$refs.audio.src = path;
                    this.$refs['audio'].play();
                }{
                    if (aa === path){
                        // 如果路径相同,说明是同一首歌
                        if (this.$refs.audio.currentTime > 0 ){
                            // this.$refs['audio'].play();
                            // 如果大于0, 说明已经开始播放
                            if (this.$refs['audio'].paused){
                                this.$refs['audio'].play();
                            }else {
                                this.$refs['audio'].pause();
                            }
                        }else {
                            this.$refs['audio'].play();
                        }
                    }else {
                        // 如果路径不同,说明换了位置了。
                        this.$refs.audio.src = path;
                        this.$refs['audio'].play();
                    }
                }
            },

你可能感兴趣的:(vue 播放音频)