项目名称：wavesurfer-js

github地址：https://github.com/katspaugh/wavesurfer.js

官网地址：http://wavesurfer-js.org/

技术原理：Web Audio API

核心，通过 getChannelData 获取波形的峰值，然后通过 canvas 进行绘制，并且同时使用 audio 进行播放。

能用来干嘛？我用它来做语音标注工具。

其他的采用了这个组件的牛逼项目：

https://github.com/katspaugh/wavesurfer.js/wiki/Projects

分享：带波形的语音播放工具（wavesurfer-js）的更多相关文章

  1. Wavesurfer.js音频播放器插件的使用教程

    Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import W ...

  2. OnlineTV 电视播放工具

    通过网络使用电脑收看电视节目的播放工具,跟其他播放软件不同的是增加了录制功能. getList_bin_src.7z 获取电视直播源 OnlineTV-20161005.tar.xz OnlineTV ...

  3. js仿微信语音播放

    html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...

  4. iOS开发拓展篇—封装音频文件播放工具类

    iOS开发拓展篇—封装音频文件播放工具类 一.简单说明 1.关于音乐播放的简单说明 (1)音乐播放用到一个叫做AVAudioPlayer的类 (2)AVAudioPlayer常用方法 加载音乐文件 - ...

  5. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

  6. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...

  7. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

  8. C# 文本转语音，在语音播放过程中停止语音

    1,运用SpVoice播放语音 在VS2013创建Windows窗体应用程序项目,添加引用COM组件Microsoft Speech Object Library: using SpeechLib; ...

  9. Windows自带强大的入侵检测工具——Netstat 命令 查询是否中木马

    Netstat命令可以帮助我们了解网络的整体使用情况.根据Netstat后面参数的不同,它可以显示不同的网络连接信息.Netstat的参数如图,下面对其中一些参数进行说明.如何检测本机是否有被中木马, ...

随机推荐

  1. Hibernate 使用注解后没发现建表

    可能的原因: ①该注解类中的注解出错:例如是否因为属性名与数据库关键字冲突 ②是否添加包扫描配置: <property name="packagesToScan" value ...

  2. 【POJ3294】 Life Forms （后缀数组+二分）

    Life Forms Description You may have wondered why most extraterrestrial life forms resemble humans, d ...

  3. 读书笔记-----Java并发编程实战（一）线程安全性

    线程安全类:在线程安全类中封装了必要的同步机制,客户端无须进一步采取同步措施 示例:一个无状态的Servlet @ThreadSafe public class StatelessFactorizer ...

  4. DD-WRT相关资源

    版本网站下载:Other Downloads,进入betas->2014 FTP下载:如ftp://ftp.dd-wrt.com/betas/2014/06-23-2014-r24461/ Re ...

  5. [CA]一个证书两个域名

    一般一个证书是绑定一个Common name,出于某种测试的需要,我们可能要求一个Site的证书可以是针对2个域名的. 操作如下: 1.CA上CMD输入下面命令,回车: Certutil –setre ...

  6. HDOJ/HDU 2562 奇偶位互换(交换位置~)

    Problem Description 给定一个长度为偶数位的0,1字符串,请编程实现串的奇偶位互换. Input 输入包含多组测试数据: 输入的第一行是一个整数C,表示有C测试数据: 接下来是C组测 ...

  7. [转]C语言单引号和双引号的区别

    单引号和双引号在C中的意义完全不同,包围在单引号中的一个字符只是编写整数的另一种方法.这个整数是给定的字符在实现的对照序列中的一个对应的值,即ASCII码值.因此在一个ASCII实现中,‘a’和014 ...

  8. Anjuta 调试无输出 warning: GDB: Failed to set controlling terminal

    调试无输出,起初以为是那个warning的问题,后来才知道这个系统printf直到遇到'\n'换行符才输出,VC6用习惯了没想到还有这样的,网上说这样是节省系统资源. 那个warning暂时还没看到影 ...

  9. 爬虫技术浅析 | WooYun知识库

    爬虫技术浅析 | WooYun知识库 爬虫技术浅析 好房通ERP | 房产中介软件最高水准领导者 undefined

  10. weekend110（Hadoop）的 第七天笔记

    (2015年1月31日) 课程目录 01-storm基本概念 02-storm编程规范及demo编写 03-storm的topology提交执行 04-kafka介绍 05-kafka集群部署及客户端 ...