vue+wavesurfer.js:画波形图

野性酷女 2023-01-15 08:01 248阅读 0赞

#### wavesurfer.js的信息 ####

// git
     https://github.com/katspaugh/wavesurfer.js
     // 官网
     https://wavesurfer-js.org/docs/events.html

#### 安装 ####

yarn add wavesurfer.js

#### 使用 ####

*  template

*  script

import WaveSurfer from 'wavesurfer.js'
    import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.js' //导入指针轴插件
    export default{ 
        props: { 
            rebot:{ 
                type: Object
            },
            person:{ 
                type:Object
            },
            url:{ 
                type: String,
                default: require("../../../assets/image/test.mp3")
            },
            toStopVoice:{ 
                type: Boolean,
                default: false
            },
            loadWave:{ 
                type: Boolean,
                default: true
            }
        },
        data(){ 
            return{ 
                wavesurfer: null, // 波形图对象
                time: '00:00',
                isPlaying: false
            }
        },
        mounted() { 
            this.$nextTick(() => { 
                // 是否重新加载
                if (this.loadWave) { 
                    this.loadVoice()
                }
            })
    
        },
        methods:{ 
            // 转化数字为字符串 如果小于0 返回 0x (01 02...)
            buZero(num) { 
                return num > 9 ? num : '0' + num
            },
            // 加载或者创建波形图
            loadVoice(bool) { 
                if (this.wavesurfer) { 
                    if (bool) { 
                    this.time = '00:00'
                    this.wavesurfer.load(this.url)
                    }
                } else { 
                    this.wavesurfer = WaveSurfer.create({ 
                    container: this.$refs.waveform,
                    waveColor: '#65da74',
                    progressColor: 'purple',
                    height: '80',
                    backgroundColor:"#f7f3f4",
                    scrollParent: true,
                    plugins: [
                            CursorPlugin.create({ 
                                showTime: true,
                                opacity: 1,
                                customShowTimeStyle: { 
                                    'background-color': '#000',
                                    color: '#fff',
                                    padding: '2px',
                                    'font-size': '10px'
                                }
                            })
                        ]
                    })
                    this.wavesurfer.load(this.url)
                    this.wavesurfer.on('audioprocess', (e) => { 
                        const times = Math.ceil(e)
                        this.time = this.buZero(Math.floor(times / 60)) + ':' + this.buZero(times % 60)
                    })
                    this.wavesurfer.on('finish', () => { 
                        this.isPlaying = false
                    })
                }
            },
            // 开始
            playVoice() { 
                if (this.wavesurfer) { 
                    if (this.wavesurfer.isPlaying()) { 
                        this.isPlaying = false
                        this.wavesurfer.pause()
                    } else { 
                        this.isPlaying = true
                        this.wavesurfer.play()
                    }
                }
            }
     
        },
        watch: { 
            'loadWave': function() { 
                this.playVoice()
            },
            'url': function() { 
                this.playVoice(true)
            },
            'toStopVoice': function() { 
                if (this.wavesurfer) { 
                    this.wavesurfer.pause()
                }
            }
        },
    }

*  style

.voice-dialog-content{ 
            display: flex;
            align-items: center;
        }
        #waveform{ 
            margin-left: 4px;
            margin-bottom: 4px;
            width: 98%;
        }
        .voice-dialog-time{ 
            margin-left: 3px;
        }

*  运行效果  
    ![在这里插入图片描述][20210421200111722.gif]

[20210421200111722.gif]: /images/20221022/5512ace1787a4e629e753c01fc8c5877.png