微客导航 » 文章资讯 » vue中音频wavesurfer.js的使用方法

vue中音频wavesurfer.js的使用方法

2023-07-31 22:31:04 273

本文为大家分享了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;
}

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

isYinyin:false,//是否加载录音组件 showDialog:true,//是否初始化录音组件 luyinUrl:"",//录音url 数据库录音格式123.wav

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue中音频wavesurfer.js的使用方法

热门推荐

随机推荐