音频可视化插件wavesurfer.js多音频实例

所属分类:媒体-音频和视频

 15548  185  查看评论 (3)
分享到微信朋友圈
X
音频可视化插件wavesurfer.js多音频实例 ie兼容11

注:此插件需要在服务端运行,本地预览会有跨域问题!

使用方法

在HTML中,包括缩小的脚本:

<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="js/wavesurfer.min.js"></script>

创建一个显示波形的容器(可动态创建多个):

<div id="waveform"></div>

在JavaScript应用程序中,创建一个waveurfer实例,传递容器选择器以及一些选项:

var wavesurfer = WaveSurfer.create({
   container: '#waveform',
   waveColor: 'violet',
   progressColor: 'purple'
});

最后,加载音频:

wavesurfer.load('audio.mp3');
相关插件-音频和视频

h5视频播放器

支持拖拽与点击跳转可以切换全屏并且支持音量调节已经绑定键盘事件
  音频和视频
 90219  317

Html5 手机视频播放器自适应

Html5 手机视频播放器自适应
  音频和视频
 110250  472

音频可视化插件wavesurfer.js多音频实例

音频可视化插件wavesurfer.js的使用(包含多个音频的切换)
  音频和视频
 15549  185

简单的音乐播放器

手写原生态的音乐播放器 代码注释全,修改方便,可以参考一下
  音频和视频
 23715  226

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    米松-影视CG分享网 0
    2020/3/2 15:36:56
    你好,怎么换有音乐,音波没有变化
        西瓜1
        2020/3/2 16:20:09
        //音频
        var music = ['0.mp3', '1.mp3', '2.mp3', '3.mp3']
        米松-影视CG分享网0
        2020/3/10 15:37:11
        音频换了,音波不变
    回复
取消回复