这主题主要是早期对 web audio api 的一些尝试，这里整理一下以便以后翻阅，如有错误，诚请指正。

在真正进入 Web Audio API 开发之前，需要先弄清两个概念：音频上下文（AudioContext）、音频节点（AudioNode）;

Web Audio API 是一套以音频上下文（AudioContext）为基础的接口系统；基本上每一次的开发都需要第一个用到，

看下 W3C 对 AudioContext 的描述：

This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

大意是一个 AudioContext 代表一系列音频节点以及节点之间的连接方式，它允许一个或以上的音频信号在经过任意的连接之后最终连接在音频播放设备节点上；节点都是可以通过音频上下文对象然后连接到了一起；通常一个文档中只需要一个一个音频上下文对象即可。

这主题主要是早期对 web audio api 的一些尝试，这里整理一下以便以后翻阅，如有错误，诚请指正。

在这之前，先回顾一下那些年我们一起走过的 web audio：

<bgsound>

在我印象当中，bgsound 是个很古老的东西，接触互联网之后，那时兴起的个人 blog 都有一个增加小组件或者背景音乐的功能，就是允许你贴入一段代码来实现，那是我最早接触 bgsound 的时候；当然那时也只是会 ctrl+c/v ~~

网上翻来些资料，大概是这样的：

早在 1996 年，IE3.0 定义了<bgsound> 的标签，这应该 web 最早的一个能播放音频的标签；但它却从未成为标准，由始至终只有 IE 支持该标签；提供的功能比较有限，简单的后台自动播放，支持.wav|.mid|.ua 格式音频；

AlloyDesigner 介绍

　　AlloyDesigner 的创意来自于 “临摹” 的灵感，使用 AlloyDesigner 后，你可以把设计稿拖进你的 Web 页面铺在页面的最底层，然后就可以对着设计稿来构建 DOM 元素和 CSS 样式啦，这样子是不是直观了很多？通过 AlloyDesigner 直观地调整页面，迅速达到与视觉稿一致的目的。

AlloyDesigner 的官网：http://alloyteam.github.io/AlloyDesigner/

What’s JX.Animate

• JX.Animate 官网：http://alloyteam.github.io/JXAnimate/

What's AlloyStick

AlloyStick 是一款专为 HTML5 开发的 2D 骨骼动画引擎。可以用于 HTML5 动画开发、HTML5 游戏开发。AlloyStick 主要由骨骼动画引擎和骨骼动画编辑器两部分组成。骨骼动画编辑器提供强大的骨骼动画编辑功能，拖拽骨骼组合角色，通过设置动画关键帧，输出动画数据。js 动画库根据输出数据，依靠强大的自动补间和骨骼关系，就可以制作出逼真、生动的 Canvas 骨骼动画，可以畅快的运行在 PC、手机、平板等设备里。

网上的教程好复杂，我写一个简版的。

====索引=====

【Web 缓存机制系列】1 – Web 缓存的作用与类型

【Web 缓存机制系列】2 – Web 浏览器的缓存机制 

【Web 缓存机制系列】3 – 如何构建可缓存站点

【Web 缓存机制系列】4 – HTML5 时代的 Web 缓存机制

【Web 缓存机制系列】5 – Web App 时代的缓存机制新思路

【Web 缓存机制系列】6 - 进击的 Hybrid App，量身定做缓存机制

============

前言

前面的文章分别简述了 Web 缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间，这期间移动互联网成为大家讨论和学习的焦点，部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时，还有部分同学专注 QQ 内嵌 Webkit + Client 这种 Hybrid App 模式的开发，继续推动 QQ 客户端 Web 化的进程。

引用张图，简单粗俗的解释下 Native App、Web App 和 Hybrid App

最近在更新 JX.Animate 的 Demo，我想让首页的美女图动起来。用的是 Canvas 实现的，过几天大家就可以看到一边移动一边缩放的效果了。

在切换图片的时候，过场动画是用 m×n 个 div 的 CSS3 动画实现的。此时 div 上显示的图片必须要和 Canvas 大图上的一致。

之前是用图片 url 设置 div 背景的方式实现的。于是很自然的想到可以通过 Canvas.toDataURL() 获得一个 DataImageURL，然后沿用原来的逻辑就行了。

现实永远是骨感的。

DataImageURL 字符串必然是一个巨长无比的字符串，用这么长的字符串进行 m×n 次的 DOM 操作，结果就是一场灾难。

在使用 canvas 制作动画时，最传统的方式是对 canvas update -> clear -> draw 的过程

但是对于同一个 view 里的不同的动画，需要的更新频率可能并不一样，所以对于不同类型的动画，我们可以放在不同的 canvas 层上进行渲染，使用多层 canvas 分别渲染取代单个 canvas