Peaks.js —— 来自 BBC 的音频波形可视化

简介:

Peaks.js 基于浏览器的音频波形可视化工具,来自 BBC。

Peaks.js 封装了一组软件工具,可以让用户在浏览器里对音频波形图材料进行查看和交互。

Peaks.js 使用 HTML5 < canvas> 元素来显示不同缩放级别的波形数据,并同步显示相关的 < audio> 元素。该组件提供了一些简便的方法,可用于与波形图、音频片段进行交互,例如,可以从演讲中识别出音乐,或者识别不同的音乐曲目。

工作流:

image

样本示例:

image

文章转载自 开源中国社区 [http://www.oschina.net]

相关文章
|
6月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
1月前
|
编解码 数据可视化 前端开发
如何使用 D3.js 创建一个交互式的地图可视化?
如何使用 D3.js 创建一个交互式的地图可视化?
|
2月前
|
数据可视化 前端开发 JavaScript
可视化工具D3.js
可视化工具D3.js
104 2
|
5月前
|
Web App开发 移动开发 前端开发
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
技术经验分享:canvas+howler.js解决同页面视频、音频同时播放问题
162 0
|
1月前
|
数据可视化 前端开发 JavaScript
可视化工具D3.js
可视化工具D3.js
|
3月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
195 2
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
Echarts+JS实现农业指挥舱可视化大屏!!附源码!!
|
3月前
|
数据可视化 前端开发 JavaScript
Echarts+JS实现数据分析可视化大屏!!附源码!!
Echarts+JS实现数据分析可视化大屏!!附源码!!
|
3月前
|
监控 数据可视化 前端开发
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
【前端】政务服务大数据可视化监控平台(源码+html+css+js)
|
4月前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
420 3