怎么在vue中使用wavesurfer.js

这篇文章将为大家详细讲解有关怎么在vue中使用wavesurfer.js，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

首先引入wavesurfer.js

其次 封装 wavesurfer.js`

<template>
<divclass="waveformOuter">
<divid="waveform"ref="waveform"/>
<divclass="play"@click="playMusic">
<svg-iconv-if="!isPlaying"icon-class="play"class="iconmyplay"/>
<svg-iconv-elseicon-class="stop"class="iconmystop"/>
<p>{{time}}</p>
</div>
<!--<p>{{url}}</p>-->
</div>
</template>
<script>
importWaveSurferfrom'@/assets/js/wavesurfer'
exportdefault{
props:['url','toStopMusic','loadWave'],
data(){
return{
isPlaying:false,
time:'00:00',
wavesurfer:null,
}
},
watch:{
'loadWave':function(){
this.loadMusic()
},
'url':function(){
//returnthis.wavesurfer.getCurrentTime()
this.loadMusic(true)
console.log('url---------------------------------------')
},
'toStopMusic':function(){
console.log('toStopMusic---------------------------------------')
if(this.wavesurfer){
this.wavesurfer.pause()
}
}
},
mounted(){
this.$nextTick(()=>{
if(this.loadWave){
console.log('haha')
this.loadMusic()
}
})
},
methods:{
itemClick(node){
console.log(node.model.id)
},
buZero(num){
returnnum>9?num:'0'+num
},
loadMusic(bool){
console.log('this.WaveSurfer--------------------------------------',WaveSurfer)
if(this.wavesurfer){
if(bool){
this.time='00:00'
this.wavesurfer.load(this.url)
}
}else{
this.wavesurfer=WaveSurfer.create({
container:this.$refs.waveform,
waveColor:'violet',
progressColor:'purple'
})
this.wavesurfer.load(this.url)
this.wavesurfer.on('ready',()=>{
//this.wavesurfer.play()
})
this.wavesurfer.on('audioprocess',(e)=>{
consttimes=Math.floor(e)
this.time=this.buZero(Math.floor(times/60))+':'+this.buZero(times%60)
})
this.wavesurfer.on('finish',()=>{
this.isPlaying=false
})
}
},
stopMusic(){
if(this.wavesurfer){
this.wavesurfer.stop();
}
},
playMusic(){
console.log("开始")
console.log(this.wavesurfer)
console.log("点击开始播放按钮",this.url)
if(this.wavesurfer){
if(this.wavesurfer.isPlaying()){
this.isPlaying=false
debugger
this.wavesurfer.pause()
}else{
this.isPlaying=true
this.wavesurfer.play()
}
}
}
}
}
</script>

<!--Add"scoped"attributetolimitCSStothiscomponentonly-->
<stylescoped>
.myplay{
position:absolute;
top:50%;
font-size:17px;
margin:-10px00-9px;
left:50%;
}
.mystop{
position:absolute;
top:50%;
margin:-15px00-18px;
left:50%;
font-size:25px;
}
#waveform{
width:calc(100%-150px);
height:128px;
float:left;
margin-right:22px;
background:black;
}
.play{
position:relative;
width:128px;
height:128px;
border-radius:3px;
background-color:#EBEEF5;
float:left;
text-align:center;
}
.playp{
margin-top:85px;
color:#3683FA;
}

.waveformOuter{
margin-bottom:20px;
overflow:hidden;
}
</style>

再然后 在需要的组件中引入

<divclass="luyin"v-if="this.isYinyin">
<!--{{this.isYinyin}}-->
<my-wave-suferref="handleDialogClose":url="luyinUrl":load-wave="showDialog":to-stop-music="!showDialog"/>
</div>
isYinyin:false,//是否加载录音组件
showDialog:true,//是否初始化录音组件
luyinUrl:"",//录音url
数据库录音格式123.wav

关于怎么在vue中使用wavesurfer.js就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。