} else {
this.isPlaying = true
this.wavesurfer.play()
}
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.myplay{
position: absolute;
top: 50%;
font-size: 17px;
margin: -10px 0 0 -9px;
left: 50%;
}
.mystop{
position: absolute;
top: 50%;
margin: -15px 0 0 -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;
}
.play p{
margin-top: 85px;
color: #3683FA;
}
.waveformOuter{
margin-bottom: 20px;
overflow: hidden;
}
</style>
再然后 在需要的组件中引入
<div class="luyin" v-if="this.isYinyin">
<!-- {{this.isYinyin}} -->
<my-wave-sufer ref="handleDialogClose" :url="luyinUrl" :load-wave="showDialog" :to-stop-music="!showDialog" />
</div>
isYinyin: false,//是否加载录音组件
showDialog: true, //是否初始化录音组件
luyinUrl: "", //录音url
数据库录音格式 123.wav
