简介

本文主要列举几种常见的音效实现在web平台下的实现，项目实现的源代码已上传 github，喜欢的话就点个star吧，也可点击 项目地址 进行测试（chrome体验最佳）。

Audio API基本概念

Audio API 提供了控制音频的一个依据，它量化了音频在web系统上的流通轨迹，使得开发者可以通过 Audio Context对象来指定多种音频的流通渠道，并且在流通的过程中实现丰富的音频处理。
在实现上，Audio API将音频路径量化为一个个相连的节点，音频节点通过它们的输入输出相连，形成了一道道可控的音频通路，并最终汇集在同一个目的地destination（通常是扬声器或耳机等播放器）。一个典型的audio音效工作流如下所示：

以上音频的实现步骤可分为：
1.创建音频环境上下文（Audio Context）；
2.在音频环境中创建音源（source），该对象可以为振荡器、Audio标签对象等等；
3.创建音效节点，如混响、双二阶滤波器、平移、压缩；
4.为音频选择一个终点（destination），如系统扬声器；
5.连接音源到音效节点，以及连接音效节点到终点，以构成音频播放的通路。
通过图示，我们可以将音频处理分解为三个节点的相连：源节点、分析和处理节点、目的节点。在中间的处理节点上，可以通过底层API实现音效，如使用BiquadFilterNode调整音色（即滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐的淡入淡出。

单页面应用快速搭建

使用官方推荐的Create React App是目前搭建React项目最佳的选择，它会自动在新项目下配置好程序开发和发布环境，同时还自动安装相关的优秀npm包（如babel、loader），极其方便即可实现 JavaScript ES6语法的无阻碍编写和运行。
nodeJS环境下全局安装create-react-app，使用它创建一个新项目，随后进入目录执行npm start即自动拉起服务

1
2
3
4

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

前端自动化帮助我们像工厂一样生产和管理自己的项目代码，记录gulp快速使用的笔记如下。

入门指南

1.首先gulp运行需要nodeJS环境，如果还未安装好node，可以前往官网下载，这里不再赘述安装过程。确认安装成功后，我们打开终端，先全局安装gulp。

1

$ npm install gulp --global

2.接着cd到新建文件夹中，执行以下语句来局部安装gulp。（若项目还未初始化，记得先执行 npm init）

1

$ npm install gulp --save-dev

3.在项目test的根目录下创建一个名为 gulpfile.js 的文件（注意这里的命名只能是gulpfile.js）

1
2
3
4
5

// gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
	// 默认的任务代码
})

4.运行 gulp：

1

$ gulp

默认的名为 default 的任务（task）就被运行了，在这里，这个任务并未做任何事情。

若要单独执行特定的任务（task），请输入 gulp + 任务名。

React简介

React 是 Facebook 和 Instagram 用来创建用户界面的一个 JavaScript 框架。

很多人认为 React 是 MVC 中的 V（视图）。React是个很年轻的框架，它正引起了越来越多的人关注和使用，在github上的热门程度为4w+颗星。一提起它，很多人会立即联想到虚拟DOM。是的，以往JavaScript的性能瓶颈问题便是DOM，而在React框架里，它着眼解决DOM渲染的性能问题，其涉及到的许多新思想如虚拟DOM，DOM渲染算法，JSX语法都可谓是技术上的革新，而其实现的代码逻辑却简明易懂，故而受到越来越多的人支持和使用，并认为它很有可能成为主流的前端开发框架。

接下来我们会尝试了解和使用React框架，体验一下在React开发里会有哪些新奇的做法。

以往普通的html结构，小到一个按钮，一段文本，一个输入框，大到一个表单，一个container，在React看来都是一个个组件，React倾向于对界面进行组件化开发，最后拼合起来形成一个完整的项目。React把html拆分成一个个小组件，以此来提高代码复用和逻辑清晰度，更重要的，方便进行虚拟DOM树的构建。组件可以看成是一个DOM元素，可以看成是一个函数，还可以看成是一个状态机。概念说得有点多了，别着急，我们会在接下来的实例中一一感受到这些。

学习AngularJS之前先对它来个整体上的定位。AngularJS是为了克服HTML在构建应用上的不足而设计的，它有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

ng（Angular的缩写）的作者这样理解它：“HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。”

总结如下：ng 让 html 可运算，还有了MVVM的味道。接下来我们开始尝试使用angularJS。编写一个入门级的案例Hello World会很不错。有nodeJS环境的话我们可以用npm或者bower安装AngularJS（windows系统可能会出现错误==），

1
2

$ sudo npm init
$ sudo npm install angular 1.5.7

当然也可以到官网上直接下载angularJS文件，我们从第一个版本学起，先不选择angularJS–2。

jquery优化笔记收录。

nodeJS安装指引
前往nodeJS官网下载相应的版本并安装，也可参考菜鸟教程上详尽的安装明细。
安装成功后，windws下cmd打开终端，键入命令

1
2

C:\Users\admin> node -v
v4.4.7