基于wavesurfer.js 制作音乐播放器，支持音频标记，修改，播放时读取标记 |
您所在的位置：网站首页 › 音乐播放器倍速播放 › 基于wavesurfer.js 制作音乐播放器，支持音频标记，修改，播放时读取标记 |
基于wavesurfer.js 制作音乐播放器，支持音频标记，修改，播放时读取标记
|
最新收到一个需求，需要做一个音乐播放器，同时可以在音频上进行标记颜色，并修改颜色和播放的位置，同时播放的时候，播放到标记的位置上进行提示。来看一下编辑的效果图: 使用npm安装：npm i wavesurfer.js --save ，最好安装6.6左右的版本，新版本可能会有点问题，
初始化waveSurfer，部分代码如下： initMusic() { this.loading = true this.$nextTick(() => { // console.log('加载WaveSurfer') // console.log(WaveSurfer) this.wavesurfer = WaveSurfer.create({ // 应该在其中绘制波形的CSS选择器或HTML元素。这是唯一必需的参数。 container: this.$refs.waveform, // 光标的填充颜色，指示播放头的位置。 cursorColor: '#e0e4e9', // 更改波形容器的背景颜色。 backgroundColor: '#124780', // 光标后的波形填充颜色。 waveColor: '#4da3ff', // 光标后面的波形部分的填充色。当progressColor和waveColor相同时，完全不渲染进度波 progressColor: '#a2cdfb', backend: 'MediaElement', // 音频播放时间轴 mediaControls: false, // 播放音频的速度 audioRate: '1', // 插件：此教程配置了光标插件和时间轴插件 plugins: [ // 光标插件 // CursorPlugin.create({ // showTime: true, // opacity: 1, // customShowTimeStyle: { // 'background-color': '#000', // color: '#fff', // padding: '2px', // 'font-size': '10px' // } // }), // 时间轴插件 Timeline.create({ container: '#wave-timeline' }), RegionsPlugin.create({}) // 开启标注区 ] }) this.wavesurfer.on('error', e => { console.warn(e) }) // 加载音频url this.wavesurfer.load(this.voiceSrc) this.volumeValue = this.wavesurfer.getVolume() * 100 // this.wavesurfer.on('region-update-end', obj => { // // 标注区更新 // this.toUpdateShowList(obj) // }) this.wavesurfer.on('audioprocess', () => { if (this.wavesurfer.isPlaying()) { this.totalTime = parseInt(this.wavesurfer.getDuration()) this.currentTime = parseInt(this.wavesurfer.getCurrentTime()) this.currentSecond = parseInt(this.wavesurfer.getCurrentTime()) this.arrList.push(this.currentTime) this.arrList = [...new Set(this.arrList)] // this.arrList.map((item, index) => { // if (item === this.totalTime) { // this.arrList.splice(index, 1) // } // }) // var remainingTime = totalTime - currentTime } }) // this.wavesurfer.enableDragSelection({}) // 允许鼠标拖动创建标注区 // this.drawRegion() // 有标注则自动绘制已标注部分 setTimeout(() => { this.loading = false }, 1500) }) },在音频上打标记，部分代码: makeMarker() { this.wavesurfer.pause() this.wavesurfer.clearRegions() this.showList.push({ time: Number(this.currentTime), color: 'rgb(15 255 55)' }) this.showList.map(o => { this.drawRegion(o) }) this.$emit('makeMarker', { currentTime: this.currentTime, currentSecond: this.currentSecond, index: this.index }) }, 三：播放时读取标记由于播放的音频精确到毫秒，所以你需要去重一下，具体的代码如下： this.wavesurfer.on('audioprocess', () => { if (this.wavesurfer.isPlaying()) { this.totalTime = parseInt(this.wavesurfer.getDuration()) this.currentTime = parseInt(this.wavesurfer.getCurrentTime()) this.currentSecond = parseInt(this.wavesurfer.getCurrentTime()) this.arrList.push(this.currentTime) this.arrList = [...new Set(this.arrList)] // this.arrList.map((item, index) => { // if (item === this.totalTime) { // this.arrList.splice(index, 1) // } // }) // var remainingTime = totalTime - currentTime } })然后在watch 里面去监控 至此，大致的功能基本实现了 如需完整的demo,请联系[email protected] |
查看的效果图： 
视频效果: 动画效果
【本文地址】
今日新闻 |
推荐新闻 |