怎么在vue中使用wavesurfer.js-创新互联
这篇文章将为大家详细讲解有关怎么在vue中使用wavesurfer.js，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
从策划到设计制作，每一步都追求做到细腻，制作可持续发展的企业网站。为客户提供网站设计制作、
成都网站建设、网站策划、网页设计、域名与空间、网页空间、网络营销、VI设计、 网站改版、漏洞修补等服务。为客户提供更好的一站式互联网解决方案,以客户的口碑塑造优易品牌,携手广大客户,共同发展进步。
首先引入wavesurfer.js
其次 封装 wavesurfer.js`
{{ time }}
.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;
}
再然后 在需要的组件中引入
isYinyin: false,//是否加载录音组件
showDialog: true, //是否初始化录音组件
luyinUrl: "", //录音url
数据库录音格式 123.wav
关于怎么在vue中使用wavesurfer.js就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网站名称：怎么在vue中使用wavesurfer.js-创新互联
文章来源：
http://cdweb.net/article/ihpjg.html
