项目名称：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. python处理csv数据

    import csv #从文件读取 reader = csv.reader(file(srcFilePath,'rb')) for line in reader: #忽略第一行 if reader.l ...

  2. Palindrome

    poj3974:http://poj.org/problem?id=3974 题意:求给定长度最长回文串的长度. 题解:直接套manacher,搞定. #include<iostream> ...

  3. lc面试准备：Partition List

    1 题目 Given a linked list and a value x, partition it such that all nodes less than x come before nod ...

  4. Linux下文件轻松比对，自由开源的比较软件

    文件比较工具用于比较计算机上的文件的内容,找到他们之间相同与不同之处.比较的结果通常被称为diff. diff同时也是一个基于控制台的.能输出两个文件之间不同之处的著名的文件比较程序的名字.diff是 ...

  5. [LeetCode#159] Missing Ranges Strobogrammatic Number

    Problem: Given a string, find the length of the longest substring T that contains at most 2 distinct ...

  6. Traffic Manager：Azure中国版 正式发布

     我们很高兴地宣布Azure Traffic Manager 现已面向中国版Azure正式发布.此版本现已投入生产,由企业 SLA支持,随时可用于生产场景中. 借助Azure Traffic Ma ...

  7. 【转】OpenGL基础图形编程（二）

    原文:http://blog.chinaunix.net/uid-20638550-id-1909184.html  分类: 十一.位图与图像 11.1.位图 11.1.1 位图(Bitmap)与字符 ...

  8. Qt 与 JavaScript 通信

    使用QWebView加载网页后,解决Qt与JavaScript通信的问题: The QtWebKit Bridge :http://qt-project.org/doc/qt-4.8/qtwebkit ...

  9. NGU-学习笔记（1）-动态添加删除图集

    现在 正在做unity的方向 不得不说我选的是UI方向 Unity中很有名的就是NGUI插件了.今天做了个ngui的简单背包系统.非常简陋..初学着 自己mark下 (1)预览 主要就是个 simpl ...

  10. 模糊化GPU滤镜汇总

    GPUImageTiltShiftFilter 这是一个模糊图片上下两层的滤镜效果,可以调节模糊边界,可以调节模糊程度 总共4个参数,具体如下     //模糊度的调节,0为最清晰,后面越来越模糊   ...