项目名称：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. Girls' research

    hdu3294:http://acm.hdu.edu.cn/showproblem.php?pid=3294 题意:就是给你一个串,然后求一个最长的回文串,输出起点及串,但是这里在之前要转化一下. 题 ...

  2. vmware克隆centos6.5 导致 system eth0 不可用解决办法

    vim /etc/udev/rules.d/70-persistent-net.rules 可以看到eth0 eth1两个. 注释 NAME="eth0" # PCI device ...

  3. 数据结构（并查集||树链剖分）：HEOI 2016 tree

    [注意事项] 为了体现增强版,题目限制和数据范围有所增强: 时间限制:1.5s 内存限制:128MB 对于15% 的数据,1<=N,Q<=1000. 对于35% 的数据,1<=N,Q ...

  4. 4种字符串匹配算法:BS朴素 Rabin-karp(上)

    字符串的匹配的算法一直都是比较基础的算法,我们本科数据结构就学过了严蔚敏的KMP算法.KMP算法应该是最高效的一种算法,但是确实稍微有点难理解.所以打算,开这个博客,一步步的介绍4种匹配的算法.也是& ...

  5. Bzoj 3809: Gty的二逼妹子序列 莫队,分块

    3809: Gty的二逼妹子序列 Time Limit: 35 Sec  Memory Limit: 28 MBSubmit: 868  Solved: 234[Submit][Status][Dis ...

  6. CSS 概览（CSS2.1）更新时间2014-0406

    CSS和HTML结合 <link rel="stylesheet" type="text/css" href="sheet1.css" ...

  7. Oracle表空间扩展

    From:http://blog.csdn.net/starnight_cbj/article/details/7398153 1.查看所有表空间使用情况 select b.file_id 文件ID号 ...

  8. 网站优化与Cdn文件传输服务

    网站优化与Cdn文件传输服务 如今互联网无处不在,其方便快捷.性质和低成本的经济特点,已经逐渐成为商务贸易.信息分发和数据交付的一个重要渠道.要想让数据的分发带来巨大的效益,那么网民的满意是唯一的办法 ...

  9. Eclipse Code Template 设置自动加注释（转）

    Eclipse Code Template 设置自动加注释 设置注释模板的入口: Window->Preference->Java->Code Style->Code Temp ...

  10. AE 线编辑

    转自原文 AE 线编辑 1.高亮显示节点 //高亮显示节点和端点 public void HighLightNode() { //清空 _mapCtrl.Map.ClearSelection(); _ ...