如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
“JS实例”目录存档
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日，星期日如何在HTML和JS中设置和获取var CSS变量
2018年11月16日，星期五
我们在CSS文件或者CSS语法中使用CSS原生变量驾轻就熟，但是如何通过JS代码动态创建或者改变CSS变量值怕是很多人就不知道了。本文就演示下如何在HTML标签和JS中设置CSS3 var变量，如何使用JS代码获取CSS变量值。本文不啰嗦，希望可以帮到你。
直接剪切板粘贴上传图片的前端JS实现
2018年09月21日，星期五
可能有小伙伴并不知道，在网页中，我们直接Ctrl+V也是能够上传图片的。诶？真有这么厉害？没错，就是这么厉害！要不进去瞅瞅，现成的源代码，高保真的demo，包你分分钟学会这种姿势，哦，不，知识！
利用剪切板JS API优化输入框的粘贴体验
2018年09月9日，星期日
输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。实际上，我们可以直接控制剪切板里面的复制的文字内容，可以实现粘贴的数据是我们希望的准确的数据格式，省去用户重新自己编辑的麻烦，可以有效提升用户的交互体验。
具体该如何实现呢？请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。
微信网页悬浮窗交互效果的web实现
2018年06月6日，星期三微信更新后，发现多了个悬浮窗功能。公众号阅读，网页浏览回退后默认会出现。再点击，可以回到刚才阅读的地方。于是，再也不会遇到回复老婆的信息，再切换回来重新找刚才阅读东西的麻烦了。我个人觉得是很有用的一个功能。
其交互效果，也被不少人称赞。例如，窗口会收缩到悬浮按钮中，悬浮按钮可以拖到右下角取消浮窗。这些交互效果呢，使用web前端技术也是可以实现，有demo，有截图，有必要的源代码展示，希望本文的内容能够对您的学习有所帮助。
突破本地离线存储5M限制的JS库localforage简介
2018年06月4日，星期一说到本地存储数据，我们首先想到的是localStorage，应该很多小伙伴都用过，使用很简单。然而，localStorage却有不少确定，如存储容量限制，只支持字符串等。localforage的作用就是用来规避上面localStorage的缺点，同时保留localStorage的优点而设计的。具体是怎么规避的呢？最终使用效果又是怎样？
即将为你揭晓……
JS实现照片图片变成黑白线条线稿
2018年06月3日，星期日本文演示如何使用JS实现照片图片变成黑白线稿图片效果，照片变成黑白简单线条有什么用呢？我能想到的就有5个用途，具体是什么，不妨进来看一看~
小tips: 点击页面出现富强、民主这类文字动画效果
2018年05月31日，星期四如何实现点击页面出现富强、民主这类文字动画效果？很简单，复制本文提供的源代码，效果立即就出现了。快进来看看怎么实现的吧？
不借助Echarts等图形框架原生JS快速实现折线图效果
2018年05月25日，星期五不借助Echarts等图形框架原生JS快速实现折线图效果，文章本身没什么，关键文章底部有个有奖竞猜，猜中有机会免费赠送《CSS世界》签名版，要不过来试试。
二次元live2d看板娘效果中的web前端技术
2018年05月21日，星期一想要在网页中插入看板娘效果，其实很简单，复制复制，粘贴粘贴代码就有了。但具体原理和技术实现是怎样的呢？本文就将介绍Live2D相关技术以及在web网页中的应用。有非常卡哇伊的demo，有必要的截图和源代码展示，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用