这主题主要是早期对 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 代表一系列音频节点以及节点之间的连接方式,它允许一个或以上的音频信号在经过任意的连接之后最终连接在音频播放设备节点上;节点都是可以通过音频上下文对象然后连接到了一起;通常一个文档中只需要一个一个音频上下文对象即可。

TAT.Jdo 【Web Audio API】— 那些年的 web audio
In HTML5,JavaScript on 2014年12月27日 by view: 15,353
2

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

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

<bgsound>

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

网上翻来些资料,大概是这样的:

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

前端 XSS 高阶玩法
In JavaScript,Web开发 on 2014年11月30日 by view: 23,194
13

故事源于某一天,笔者的一位后台同事突然在 RTX 找到了我,然后抛出了一道一看就要跪的题,

以下是他给我的原题:

初略看了一下,感觉这是在逗我么。。。这么搞,js 都 Brainfuck 化了啊。

目前已经有很多 JavaScript MVC 框架了。为什么我们还要创造 React 而为什么你会想使用它呢?

React 不是一个 MVC 框架

React 是一个用来构建可拼装化的 UI 界面的 js 库。它鼓励创造可复用性的 UI 组件,这些组件的特点之一是当前数据会随着时间发生改变。

React 不使用模版

习惯上,web 应用的 UI 界面是通过模版或 HTML 指令来搭建的。你可以使用这一整套将页面抽象化了的模版来构造你的 UI 界面。

React 在处理构建 UI 界面的不同之处在于它是以组件形式将 UI 界面阻断。这意味着 React 用的是一门真实的,全能的编程语言去渲染视图(View 层),同时我们也看到了比采用模版更优秀的一些原因:

TAT.Cson browserify 运行原理分析
In JavaScript,Node.js,Web开发 on 2014年10月21日 by view: 25,430
10

 

目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的 script 脚本中引入所用 js 就可以了。

但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以 node 作为后端为例):

1.spa 的应用,需要同时支持服务端直出页面以及客户端 pjax 拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。

2. 一个通过 websocket 对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。

这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。

TAT.dmyang JavaScript Promise 启示录
In JavaScript,Node.js,Web开发 on 2014年05月04日 by view: 50,501
24

本篇,主要普及 promise 的用法。

一直以来,JavaScript 处理异步都是以 callback 的方式,在前端开发领域 callback 机制几乎深入人心。在设计 API 的时候,不管是浏览器厂商还是 SDK 开发商亦或是各种类库的作者,基本上都已经遵循着 callback 的套路。

 

2014-03-04_171121

流程

关于流程,是从项目启动到发布的过程。在前端通常我们都做些什么?

TAT.bizai 视差滚动的爱情故事之优化篇
In JavaScript,Web开发 on 2014年02月14日 by view: 28,382
28

上篇博客链接:视差滚动的爱情故事

大家好,想起以前有家伙想给我起个花名,叫伟哥。这种跟人类生殖器官有关系的花名,怎么能让它伴随我英明的一生呢!看我不抽死那。。。。。哦,不对,看我不说服那个家伙改口,最后他在我 185 魁梧的身材,俊朗的五官的威严下改口了,只不过那天手掌略疼略疼而已。上一篇博客知道,我的女神居然有男朋友了,很明显这是上天给予我的挑战,然后故事就会像狗血韩剧那样发展,我成为了男二号,女神女主角因为得了癌症,男一号假以远赴外国寻医实则东莞被捕,就这样在女神身边消失了,而身为男二号的我会不离不弃地守护这女神,终于女神在我的爱情滋润下战胜病魔,重获新生,男二号和女神走在一起,哈哈哈哈哈哈啊啊啊哈哈,故事一定是这样。什么?你说韩剧后面还有男一号回来跟女神重拾旧爱的剧情?韩剧一般看到这里我就不看的。

。。。。。。好吧我承认,我没有成为什么男二号,而是成为一名(diao si)备胎

TAT.Perlt source map 版本 3 介绍
In JavaScript,Web开发 on 2014年01月20日 by view: 17,405
3

背景

source map 提案的作用在于可以在浏览器中的开发者工具 Closure Inspector 中像调试源代码一样地调试生成后的 Javascript 代码。

source map 是一个记录代码转换前和转换后的位置信息文件,利用 Closure Compiler 生成。

source map 经历了 3 个版本,第三版本的 source map 代码量大量减少。

故事说起在一个冰冷幽暗的夜晚上,我正思考的十分重要的人生问题,这周末该去那里 happy 好呢?是宅在家里好呢,或者宅在家里好呢,还是宅在家里好呢?这时,万年隐身的 QQ 竟然浮起浅色聊天框,我去!不得了,居然是女神主动联系我,女神一定是因为我俊朗的五官,185 的模特身材而深深地迷恋上我了,呵呵呵呵呵呵。