摘要：
前端模板中，我们通常使用 script/textarea 来存放模板代码，然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。关于 tplEngine 这个 Javascript 模板引擎，之前也写了篇 文章 介绍过，这里就不赘述了。除了使用 script 标签，textarea 也可以达到同样的效果，但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制，下面就来详细说说这个 TEMPLATE 标签。本文地址：http://www.cnbl 阅读全文
随笔分类 - HTML[5]+CSS[3]
[Voice communications] 声音的滤波
2014-02-28 13:57 by Barret李靖, 4431 阅读, 收藏, 编辑
摘要：
本系列文章主要是介绍 Web Audio API 的相关知识，以及 web语音通信 中会遇到的一些问题，阐述可能存在错误，还请多多斧正！通过设备获取音频流会不可避免的渗入一些杂音，这些杂音可能来自你周边的环境，也有可能来自录音设备本身，一些低频的声音还好，人耳难以分辨出来，但是那些高频的白噪声对音质的影响是特别大的，如我们听收音机没有调到正确的频率上，会听到吱吱兹兹的刺耳的杂音。这些杂音不仅增大了音频流信号本身的体积，而且我们的耳朵也不喜欢，所以在传输之前必须对音频做相应的滤波处理。本文地址：http://www.cnblogs.com/hustskyking/p/webAudio-filte 阅读全文
[Voice communications] 声道的转换
2014-02-27 13:17 by Barret李靖, 2506 阅读, 收藏, 编辑
摘要：
本系列文章主要是介绍 Web Audio API 的相关知识，以及 web语音通信 中会遇到的一些问题，阐述可能存在错误，还请多多斧正！很多粤语剧都提供了两个声道，一个左声道为粤语，一个右声道有国语。观看者可以自由切换声道，那么切换声道的原理是什么呢？在播放器中，只需要把不同的声道切换到声轨就行了，因为有左右两个声道，所以播放器至少是包含两个声轨的。如果我们想听粤语，只需要将右声道声轨的声音设置为 0，或者临时删掉右声道声轨。本文主要是利用 GainNode 节点控制音量的属性实现两个音轨之间的相互切换，Cross-fading 的意思可以在后面的 DEMO 中用耳朵体会出来~本文地址：htt 阅读全文
[Voice communications] 音量的控制
2014-02-26 12:56 by Barret李靖, 3230 阅读, 收藏, 编辑
摘要：
改变音频的音量是音频处理中最基础的部分，我们可以利用 GainNode 来构建 Mixers 的结构块。GainNode 的接口是很简单的：interface GainNode : AudioNode { readonly attribute AudioParam gain;};通过调节 GainNode.gain.value 就可以实现音频大小的调控了。下文会先介绍使用 Processor 来处理，这是一个最通用的节点，可以处理很多东西。在上文看得到的音频流中我们也使用了该节点。本文地址：http://www.cnblogs.com/hustskyking/p/webAudio-vol... 阅读全文
[Voice communications] 看得到的音频流
2014-02-22 20:45 by Barret李靖, 2666 阅读, 收藏, 编辑
摘要：
上文介绍了 Web Audio API 的相关知识，以及如何在你的 web 程序中引入 音频流，内容都是介绍性的，所以没有写太多 DEMO。本文重点讲解如何利用 Web Audio API 中的中间节点拿到音频信号的信息，并将信息转化成信号图绘制到 canvas 中。从上文中我们了解到，AudioContext 是音频播放和处理的一个环境，大概的流程是这个样子： +---------------+------------------------------------+ | AudioContext | | +---... 阅读全文
[Voice communications] 让音乐响起来
2014-02-20 12:47 by Barret李靖, 2760 阅读, 收藏, 编辑
摘要：
本系列文章主要是介绍 Web Audio API 的相关知识，由于该技术还处在 web 草案阶段（很多标准被提出来，至于取舍需要等待稳定版文档来确定，草案阶段的文档很多都会被再次编辑甚至重写、全部删除等，不适合作为正式参考），很多 API 都是未确定的，目前支持 Web Audio API 的浏览器是较新版的 Google Chrome 和 FireFox，其他浏览器暂时还没有兼容。现在的网络硬件环境还没有达到普遍语音通信的条件，但是 web语音通信 一定会成为后期 web 研究的一个重要话题，凭着一点个人兴趣，拿出来研究研究~本文主要介绍 Web Audio API 的相关特性，以及音频源的 阅读全文
JavaScript多文件下载
2014-02-12 21:50 by Barret李靖, 40718 阅读, 收藏, 编辑
摘要：
对于文件的下载，可以说是一个十分常见的话题，前端的很多项目中都会有这样的需求，比如 highChart 统计图的导出，在线图片编辑中的图片保存，在线代码编辑的代码导出等等。而很多时候，我们只给了一个链接，用户需要右键点击链接，然后选择“另存为”，这个过程虽说不麻烦，但还是需要两步操作，倘若用户想保存... 阅读全文
再探@font-face及webIcon制作
2014-01-27 01:50 by Barret李靖, 5640 阅读, 收藏, 编辑
摘要：
@font-face 不能说他是什么新东西了，在 CSS2.0 规范中就有了这玩意儿，IE4.0 开始就已经出现，只是当时用的不是特别广泛，后来在 CSS2.1 草案中又被删掉。随着 web 的急速发展，@font-face 价值越来越凸显，然后再次被纳入 CSS3 草案中。@font-face 是个什么东西，本文不做过多说明，不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp。需要强调的是他的书写格式：@font-face { font-family: ; src: [][, []]*; [font-weigh... 阅读全文
JavaScript异步编程原理
2014-01-05 11:01 by Barret李靖, 24452 阅读, 收藏, 编辑
摘要：
众所周知，JavaScript 的执行环境是单线程的，所谓的单线程就是一次只能完成一个任务，其任务的调度方式就是排队，这就和火车站洗手间门口的等待一样，前面的那个人没有搞定，你就只能站在后面排队等着。在事件队列中加一个延时，这样的问题便可以得到缓解。A: 嘿，哥们儿，快点！B: 我要三分钟，你先等着，完了叫你~A: 好的，记得叫我啊~ 你（C）也等着吧，完了叫你~C: 嗯！...告诉后面排队的人一个准确的时间，这样后面的人就可以利用这段时间去干点别的事情，而不是所有的人都排在队列后抱怨。我写了一段程序来解决这个问题：/*** @author Barret Lee* @email barret. 阅读全文
细说websocket - php篇
2013-12-25 11:24 by Barret李靖, 61159 阅读, 收藏, 编辑
摘要：
下面我画了一个图演示 client 和 server 之间建立 websocket 连接时握手部分，这个部分在 node 中可以十分轻松的完成，因为 node 提供的 net 模块已经对 socket 套接字做了封装处理，开发者使用的时候只需要考虑数据的交互而不用处理连接的建立。而 php 没有，从 socket 的连接、建立、绑定、监听等，这些都需要我们自己去操作，所以有必要拿出来再说一说。 +--------+ 1.发送Sec-WebSocket-Key +---------+ | | -----------------------------... 阅读全文
细说WebSocket - Node篇
2013-12-20 13:42 by Barret李靖, 41482 阅读, 收藏, 编辑
摘要：
在上一篇提高到了 web 通信的各种方式，包括 轮询、长连接 以及各种 HTML5 中提到的手段。本文将详细描述 WebSocket协议 在 web通讯 中的实现。 一、WebSocket 协议 1. 概述 websocket协议允许不受信用的客户端代码在可控的网络环境中控制远程主机。该协议包含一个 阅读全文
JavaScript之web通信
2013-12-17 22:01 by Barret李靖, 11564 阅读, 收藏, 编辑
摘要：
web通信，一个特别大的topic，涉及面也是很广的。因最近学习了 javascript 中一些 web 通信知识，在这里总结下。文中应该会有理解错误或者表述不清晰的地方，还望斧正！一、前言1. comet技术浏览器作为 Web 应用的前台，自身的处理功能比较有限。浏览器的发展需要客户端升级软件，同时由于客户端浏览器软件的多样性，在某种意义上，也影响了浏览器新技术的推广。在 Web 应用中，浏览器的主要工作是发送请求、解析服务器返回的信息以不同的风格显示。AJAX 是浏览器技术发展的成果，通过在浏览器端发送异步请求，提高了单用户操作的响应性。但 Web 本质上是一个多用户的系统，对任何用户来说 阅读全文
PJAX的实现与应用
2013-12-06 10:14 by Barret李靖, 41693 阅读, 收藏, 编辑
摘要：
一、前言web发展经历了一个漫长的周期，最开始很多人认为Javascript这们语言是前端开发的累赘，是个鸡肋，那个时候人们还享受着从一个a链接蹦到另一个页面的web神奇魔术。后来随着JavaScript的不断更新换代，他的功能不仅仅是为网页添加一点特效了，语言本身的加强以及对DOM操作能力的提升让他在前端大放光彩。尤其是ajax的出现，让JavaScript以及整个web的发展翻开了崭新的一页。利用ajax局部刷新页面，相信很多人玩得相当熟练了。如果整个页面的刷新都是使用ajax，我们可以称之为一个webapp，所有的逻辑都是在当页处理，这种形式的页面带来的体验是十分不错的，减少了那些比较“ 阅读全文
那些年，我们一起玩过的响应式布局
2013-08-11 12:17 by Barret李靖, 2688 阅读, 收藏, 编辑
摘要：
博客园的资源很丰富，也很精彩。不过这些精彩的东西放到一些移动终端上阅览就不堪入目了，体验相当不好。你可以忍受每一次打开博客，还得放大屏幕阅读么？整个屏幕都挤满了很小很小的文字，反正我是受够了。所以，我们需要改变！！！ 先看看什么是响应式布局，你所看的这篇文章就是采用响应时布局~ （现代浏览器才能看到效果）什么是响应式布局我的理解就是，为了让用户享受更好的体验效果，给用户展现最有价值的信息，让同一个页面在不同终端上有不一样的展现效果。比如你正在阅读的这篇博客，当你缩小（放大）浏览器窗口时（先滚动顶部，因为顶部做了比较多的修改，效果比较明显），你会看到这些神奇的效果。正常情况下，顶部是这样的：稍微 阅读全文
一个不陌生的JS效果-marquee,用css3来实现
2013-07-26 22:25 by Barret李靖, 15533 阅读, 收藏, 编辑
摘要：
关于marquee，就不多说了，可以戳这里。毕竟他是一个很古老的元素，现在的标准里头也不推荐使用这个标签了。但平时一些项目中会经常碰到这样的效果，每次都是重新写一遍，麻烦！JS类实现marquee今天倒弄了一个类，还不全，打个草稿吧~ 下次就凑合着用吧。DEMO在这里，戳我/*** @author 靖鸣君* @email jingmingjun92@163.com* @description 滚动* @class Marquee* @param {Object}*/var Marquee = function(){ this.direction = "top"; this. 阅读全文
字体大小自适应纯css解决方案
2013-07-04 13:18 by Barret李靖, 17210 阅读, 收藏, 编辑
摘要：
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。“viewpoint” = window sizevw = 1% of viewport width1vh = 1% of viewport height1vmin = 1vw or 1vh, 最小1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+DEMO地址：http://qianduannotes.sinaapp.com/test/fontResize.html （已经用JS修正重绘bug） ... 阅读全文
Javascript本地储存（3）：离线web应用
2013-03-30 13:03 by Barret李靖, 1786 阅读, 收藏, 编辑
摘要：
前两篇文章分别介绍了Cookie应用和另一种本地储存方式，无论是cookie、userData还是localStorage都是一段保存在客户端磁盘的一段文本，他们可以被主动删除，但是本文要讲的“应用程序缓存”是HTML5中新增的一个技术，他允许web应用将应用程序自身本地保存到用户的浏览器中，他是不会随着用户清楚浏览器缓存而被清除的。不像localStorage和sessionS只是保存web应用程序相关的数据，他是将应用程序本身保存起来——应用程序所需运行的所有文件（HTML、CSS、JavaScript、图片等）。——《Javascript权威指南（第六版）》Page-594 “应用... 阅读全文