如果你想实现右图所示的波形图效果，可以借助wavesurfer.js。wavesurfer.js上手简单，扩展丰富，有多达35个可选参数，什么音频速率控制，波形图大小尺寸啊，都完全不在话下。还有好多种方法，对了，还有很多额外的插件，丰富的使用案例。
基本上，你要想对音频进行解析，显示个图形啥的，不要多想了，就wavesurfer，童叟无欺，老少皆宜，居家旅行，开发必备。
“JS相关”目录存档
使用wavesurfer.js显示mp3 audio音频的波形图
2018年12月9日，星期日HTML5 video视频播放Picture-in-Picture画中画技术
2018年12月2日，星期日
Chrome 70已经原生支持HTML5视频播放时候Picture-in-Picture，也就是俗称的画中画技术，也就是很多视频网站看评论时候，播放视频变小挂在右下角的这种交互技术。实际上，这里的画中画要比当前视频网站的画中画要更强，强在其是一个客户端层面的接口，小视频窗口是操作系统窗体级别的，就算你的浏览器切换到其他选项卡页面，或者最小化，也会在你电脑右下角播放视频。
于是乎，我们可以一边码代码一边看网页小视频了！
如何在HTML和JS中设置和获取var CSS变量
2018年11月16日，星期五
我们在CSS文件或者CSS语法中使用CSS原生变量驾轻就熟，但是如何通过JS代码动态创建或者改变CSS变量值怕是很多人就不知道了。本文就演示下如何在HTML标签和JS中设置CSS3 var变量，如何使用JS代码获取CSS变量值。本文不啰嗦，希望可以帮到你。
CSS scroll-behavior和JS scrollIntoView让页面滚动平滑
2018年10月21日，星期日
从去年年底开始，浏览器已经开始支持的原生平滑滚动定位，CSS scroll-behavior属性和JS scrollIntoView()方法都可以。本文就将捋一捋这些平滑滚动新特性的使用方法，实际效果，以及如何在实际中应用等。一如既往，丰富配图，含GIF演示和视频截屏，必要的源代码展示和详尽的demo，希望本文内容能够对您的学习有所帮助。
拖拽献祭中的黑山羊-DataTransfer对象
2018年09月30日，星期日
伟大的安兹·乌尔·恭释放了一个超位魔法——拖拽献祭中的黑山羊魔法！凡是不能手写页面元素拖拽效果者，即死，需10日才能复活！顿时，无数前端手足无措，惊恐万分，仓皇而逃，但终究难逃一死。此时，一位小白前端横空出世，靠着解构此魔法的关键DataTransfer对象，破解了这个超位魔法，挽救了无数的前端开发，而其破解的详细信息已经记录在这篇文章中……
直接剪切板粘贴上传图片的前端JS实现
2018年09月21日，星期五
可能有小伙伴并不知道，在网页中，我们直接Ctrl+V也是能够上传图片的。诶？真有这么厉害？没错，就是这么厉害！要不进去瞅瞅，现成的源代码，高保真的demo，包你分分钟学会这种姿势，哦，不，知识！
利用剪切板JS API优化输入框的粘贴体验
2018年09月9日，星期日
输入框输入内容我们有时候为了方便，会直接粘贴内容，例如IP，网址，或者陌生人的手机号。但是，有时候我们复制的内容包含冗余信息，或者格式不准确，还需要重新编辑，体验就不好了。实际上，我们可以直接控制剪切板里面的复制的文字内容，可以实现粘贴的数据是我们希望的准确的数据格式，省去用户重新自己编辑的麻烦，可以有效提升用户的交互体验。
具体该如何实现呢？请看本文的介绍以及可以直接复制粘贴就可以使用的JS代码。
看，for..in和for..of在那里吵架！
2018年08月6日，星期一
今天天气不错，瞒着老婆去参加ChinaJoy，嘿嘿，好多周边，嘿嘿，好多萌妹子。突然，旁边一个戴眼镜的小胖子一声大叫：“看，for..in和for..of在那里吵架！”
我顺着望去，只见2点钟方向有一群穿着格子衫背着电脑包的人在围观什么，我立马发现事情不简单，就跟着过去围观，结果意想不到的事情发生了……
原来浏览器原生支持JS Base64编码解码
2018年08月4日，星期六
就在数月前，一个前端HTML字符信息转Base64的需求，我是毫不犹豫去找了个开源的base64.js，根据文档上语法一使用，嘿，数据准确，功能良好。当时弄完还洋洋得意，以为是个完美的解决。
结果，今天发现，尼玛原来浏览器很早就有了原生的JS Base64加密解密方法，显然，上面这种洋洋得意的做法完全就是瞎子点灯——白费蜡！究竟是什么方法呢？有没有什么使用上的坑呢？点击进去一起一看究竟吧~
万岁，浏览器原生支持ES6 export和import模块啦！
2018年08月2日，星期四
万岁，浏览器原生支持ES6 export和import模块啦！不仅支持静态import，还支持动态import。原以为和Node.js中的模块import一样，比较简单容易理解，结果一研究发现，在web浏览器中，原生的export和import需要知道的细节还真多，也很有必要了解。
本文内容较多，篇幅较长，丰富的demo和源代码展示，有一定深度，希望本文内容能够对您的学习有所帮助。
我的应用
我的应用