js音频可视化插件Wavesurfer.js

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

 42588  255  查看评论 (19)
分享到微信朋友圈
X
js音频可视化插件Wavesurfer.js ie兼容10

注:本地预览请用火狐浏览器,chrome浏览器需要在服务端运行

利用 wavesurfer.js 你可以创建漂亮的 HTML5 音乐播放器或一个复杂的DJ应用。

使用方法

选择一个容器:

<divid="waveform"></div>

创建一个实例,通过容器的选择选项:

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

订阅一些事件:

wavesurfer.on('ready', function () {
    wavesurfer.play();
});

从一个URL加载音频文件:

wavesurfer.load('example/media/demo.wav');
相关插件-音频和视频

音乐泡泡排序(CPC泡泡排序)

泡泡排序制作的音乐剧!每个音高被分配一个与其比例程度相对应的数字 (例如 c 大调中的 C 将从0-7 数字中获得 )。
  音频和视频
 11077  153

jQuery+HTML5类似百度音乐网页播放器代码

一款jQuery+HTML5类似百度音乐网页播放器代码免费下载,在HTML5盛行的今天,jQuery+HTML5取代了大量的程序开发工作,一款类似百度音乐播放器代码,功能灰常强大!支持火狐、IE9以上等支持HTML5+CSS3浏览器。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)
  音频和视频
 46439  363

1:1模仿虾米音乐播放器,歌词与播放进度同步

能够很好地对歌词进行同步,1:1模仿虾米音乐播放器,希望有兴趣的朋友能够相互支持。
  音频和视频
 38901  367

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

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

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

    ?? 0
    2019/1/25 15:31:46
    火狐也加载不了本地音频啊 什么情况
        Dave Krinsky0
        2019/1/25 18:53:50
        测试没有问题,不知道你用的什么音频格式。
    回复
    S1ravVb3rry 0
    2018/11/14 9:47:47
    波形图的宽度怎么调?api没这个属性啊,只有高度
        西瓜0
        2018/11/14 9:55:02

        直接css控制宽度

        <div id="waveform" style="width: 300px ">
    回复
    微凉如梦、轻如烟 ° 0
    2018/9/18 14:12:39
    摩西 0
    2018/6/27 9:18:01
    能绘出最大多大音频文件的波形?
        摩西0
        2018/6/27 9:28:49
        我测试了无法绘出200M的音频文件波形,网页会崩溃,
    回复
    月光倾泻未必凄凉 0
    2018/4/18 10:03:07
    动态添加路径报TeacherSayPlay.html:1 Uncaught (in promise) DOMException: Unable to decode audio data这个错怎么解决啊? 回复
    tzn520ywj 0
    2018/4/4 16:06:06
    没有jq币怎么下载? 回复
    ?米米-? 0
    2018/3/23 2:57:26
    请问为什么使用的时候一直提示WaveSurfer is not defined呢? 回复
    BLANK 0
    2018/1/14 14:46:15
    蕞怕想起? 0
    2017/12/29 10:40:45

    这个怎么在谷歌里面跑不起来啊

    回复
    风起云涌 0
    2017/8/10 14:41:23

    还是看不懂啊

        镪Sんī小秦0
        2017/11/23 13:48:45

        反复看

        千飞下0
        2017/12/1 16:34:13

        qq

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复