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

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

 19821  250  查看评论 (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');
相关插件-音频和视频

完美仿网易网页侧边隐藏音乐播放器

非常好用的网页侧边音乐播放器(在服务器下完美运行)
  音频和视频
 40217  373

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

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

h5视频播放器

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

jquery音乐播放器

基于Jplayer制作一款音乐播放器,界面简洁漂亮。
  音频和视频
 56297  419

讨论这个项目(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
        音频换了,音波不变
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复