怎么在vue中使用wavesurfer.js

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

首先引入wavesurfer.js

其次 封装 wavesurfer.js`

.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;
}

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