效果图如下:
1、第一步:使用以下命令安装wavesurfer.js插件库
npm install wavesurfer.js --save
2、第二步:在compenets文件夹创建voice.vue
<template>
<div :class="{'voice_wrap':true,'large':duration>40,'middle':duration>20&&duration<41,'small':duration<21}">
<img v-if="!isplay" src="@/assets/img/play.png" alt="" @click="play">
<img v-else src="@/assets/img/pause.png" alt="" @click="pause">
<div class="voice_time_line" :id="'wave'+id"></div>
<div class="duration">{{duration}}"</div>
</div>
</template>
<script>
//引入wavesurfer.js
import WaveSurfer from 'wavesurfer.js' //导入wavesurfer.js
export default {
props:{
id:Number,
url:String,
duration:Number
},
data(){
return {
isplay:false,
wavesurfer: null,
}
},
mounted(){
let that = this;
this.$nextTick(()=>{
that.wavesurfer = WaveSurfer.create({
height:24,
container: '#wave' + that.id,
cursorColor:'transparent',
maxCanvasWidth:60,
progressColor:'rgba(255,255,255,1)',
waveColor:'rgba(255,255,255,0.4)',
barGap:1.8,
barWidth:1.2,
barHeight:16,
barMinHeight:0.5
});
// 特别提醒:如果是本地文件此处需要使用require(相对路径),否则会报错
that.wavesurfer.load(that.url);
that.wavesurfer.on('finish', function () {
console.log('播放完毕:finish');
that.isplay = false;
that.wavesurfer.stop();
});
})
},
methods:{
play(){
this.isplay = true;
this.wavesurfer.play();
},
pause(){
this.isplay = false;
this.wavesurfer.pause();
}
}
}
</script>
<style lang="scss">
.voice_wrap{
background: #94BDEC;
border-radius: 18px;
height: 36px;
display: flex;
align-items: center;
padding: 0 12px;
box-sizing: border-box;
img{
width: 24px;
height: 24px;
margin-right: 4px;
}
.voice_time_line{
height: 24px;
}
.duration{
font-size: 16px;
line-height: 22px;
color: #fff;
margin-left: 8px;
}
}
.voice_wrap.large{
width: 262px;
.voice_time_line{
width: 177px;
}
}
.voice_wrap.middle{
width: 203px;
.voice_time_line{
width: 118px;
}
}
.voice_wrap.small{
width: 144px;
.voice_time_line{
width: 59px;
}
}
</style>
3、第三步:在要使用该组件的地方调用
<template>
<div>
<Voice :ref="'voice'+id" :id="id" :url="audio.url" :duration="audio.du"></Voice>
</div>
</template>
<script>
import Voice from '@/components/commentsVoice/index.vue'
export default {
data(){
return{
id:12,
audio:{
url:'',
du:''
}
}
},
mounted(){
},
methods:{
},
components:{
Voice
}
}
</script>
<style lang="scss" scoped>
</style>