Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件,本文主要记录它及其视觉效果插件Regions插件的使用方法. 1.创建实例 引入插件 import WaveSurfer from "wavesurfer.js"; 创建实例对象 this.wavesurfer = WaveSurfer.create(options); options 参数 默认值 说明 audioRate 1 音频的播放速度,数值越小越慢 barWidth none 如

一.简介 1.1  引   人生中第一份工作公司有语音识别业务,需要做一个web网页来整合语音引擎的标注结果和错误率等参数,并提供人工比对的语音标注功能(功能类似于TranscriberAG等),(博主有点话痨...适应适应,原谅我) 可以直接读第二行,简单来说,我用wavesurfer.js绘制波形,并提供语音标注的文本框进行音频标注,简易页面如下: 1.2 啥是wavesurf? wavesurfer.js是一个可自定义的语音音频可视化工具,建立于web audio和H5 canvas之上

最近在对超大音频的渐进式请求实现上面消耗了不少时间,主要是因为一对音频的基本原理不太理解,二刚开始的时候太依赖插件,三网上这块的资料找不到只能靠自己摸索.由于交互复杂加上坑比较多,我怕描述不清,这里主要根据问题来做描述(前提你需要对wavesurfer.js有一定的了解)我的这篇博客有做说明:Wavesurfer.js音频播放器插件的使用教程 实现效果: 未加载部分: 后端接口描述: a.音频主要信息接口:获取总时长.字节数.总字节.音频格式等. b. 分段请求接口:根据字节参数,传来对应段的音

系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 04 - 模块系统 Node.js 教程 05 - EventEmitter(事件监听/发射器) Node.js 教程 06 - 函数 ▁▃▅ Node.js 教程 01 - 简介.安装及配置 ▅▃▁ 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Ch

前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简单的模块系统. 模块是Node.js应用程序的基本组成部分,文件和模块是一一对应的. 换言之,一个Node.js文件就是一个模块,这个文件可能是Javascript代码.JSON或者编译过的C/C++扩展. 实例一: 这个实例演示的是,在hello.js中创建一个方法,然后在主程序main.js中调

Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然它与正常思维是不同的,但是当你真正认识它后,也会足够的让你爱上它!Node.js确实改变了我的编程观念,改变了我对计算机系统的认识! 名人总结的话,我们应该回味个几百次 同步式I/O: 线程在执行中如果遇到磁盘读写或网络通信(统称为I/O操作),通常要耗费较长的时间,这时操作系统会剥夺这个线程的CP

适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”JavaScript”>  2: JavaScript code goes here  3: </script> 2 隐藏脚本代码 1: <script language=”JavaScript”>  2: <!--  3: document.write(“Hello”); 

Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便开发的附属工具,按道理说是不值得单独为之写一篇文章的.不过Knot.js的Debugger绝对值得一篇文章. 有过框架开发体验的朋友一定多少都有过和框架搏斗的经验.一个小小的设置错误,由于你对框架的不够熟悉,导致出错后完全摸不到头脑.或者被迫在一堆陌生的代码中跟踪尝试找出问题,或者只有上网到处拉人提

dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用方法: {{= }} for 赋值 {{ }} for evaluation {{~ }} for for循环数组 {{? }} for if判断 {{! }} for html标签是否转义 {{# }} for compile-time evaluation/includes and partia

前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可以使用 比如:if="{...}",(有时候你需要对这些东西做一些特殊的处理才能用) 使用Jquery 如果你想在riot标签内部访问dom元素 你可能需要了解一下riot标签生命周期相关的知识 你会注意到,mount方法还没执行的时候,dom元素是不会被创建的 这就意味着,mount方法

前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.js教程[一]简介: 共享Mixins 混合开发可以使你很好的复用代码,如下所示: var OptsMixin = { // the `opts` argument is the option object received by the tag as well init: function(opts

前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.js教程[一]简介: 标签嵌套 让我们定义一个父标签account,一个子标签subscription <account> <subscription plan={ opts.plan } show_details="true

前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.js教程[一]简介: 循环 可以通过each属性来达到标签循环,如下: <todo> <ul> <li each={ items } class={ complet

这篇文章是记录自己阅读重新介绍 JavaScript(JS 教程)的记录和个人体会 在线调试代码工具:https://codepen.io/pen 引言 分歧根源:名字Javascript和Java有关系么?Javascript只是名字里有个Java,语言本身和Java语言一点关系也没有,这就是乱起名字的后果 版本兼容问题:网景浏览器创造的JS,结果网景浏览器被IE打败了,破产了,变成了mozilla基金会管理遗产,IE总想玩自己的js语言,导致ECMAScript 第四版难产,,不过大结局是好

花了一个上午看完[转载]Node入门 » 一本全面的Node.js教程 根据里面的Demo自己手动实现过程中还是遇到了些问题,特整理在此. <1>.由于node.msi安装包已经自动添加了系统环境变量,所以可以在任意地方路径下运行node xxx.js.<2>.确定2个环境变量是否已添加(1)一个是PATH上增加node.exe的目录C:\Program Files\nodejs,(已自动添加)(2)一个是增加环境变量NODE_PATH,值为C:\Program Files\nod

很好的一篇教程:Node.js 教程 简单做下笔记 概述 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台. Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好. 安装 win下安装后自动配置环境变量,重启后可用 NPM NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上

这里分享一批实用的实用的 Node.js 教程,工具和资源. Node.js是一个建立在Chrome之上的JavaScript运行时平台,可方便地构建快速,可扩展的网络应用程序.Node.js使用事件驱动,非阻塞I/ O模型,使得它具有轻量级,高效的特点,非常适合于跨设备分布式运行数据密集型实时应用. Node Express Boilerplate https://github.com/mape/node-express-boilerplate Node-express-boilerplate

如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi等等. 以下是Node.js入门的简单介绍,如果你对Node.js略有了解可以直接跳过此部分. 那什么是Node.js呢? Node.js是迄今运用最多的服务端JavaScript运行时环境,使用JavaScript开发跨平台的实时WEB应用. Node.js基于Google的V8 JavaScri

最近在看廖雪峰的js教程,重温了下js基础,记下一些笔记,好记性不如烂笔头嘛 编写代码尽量使用严格模式 use strict JavaScript引擎是一个事件驱动的执行引擎,代码总是以单线程执行 执行中会自动在每行的结尾添加分号 区分大小写 浮点数通常比较难比较大小,参考es6 number epsilon NaN, Infinity 都是number类型 NaN表示不是一个数字,Infinity表示无穷大,NaN和其他任何数字都不相等 Null 表示空值 ,undefined表示未定义 对象

Vue.js教程 2.体验Vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com