如果使用了 loop 属性，那么视频播放结束时不会触发 onended 事件。
如果使用了 loop 属性，则任何时候获取 ended 值都是 false；如果不使用 loop，但在 onended 事件中重新 play()（或者在添加了属性 autoplay 的情况下更换 src 值），那么中间会有大概 3 毫秒的时间拿到的 ended 值是 true。
播放过程中更改 src 值并不会触发 onended 事件，因为还没有播放结束。如果设了 autoplay，那么更改 src 值后会自动播放，播放结束后仍然会触发 onended（前提是没有设置 loop）。
更多请参考：
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
准备：
先把超时时间改成 300 秒，参 http://www.cnblogs.com/jackluo/p/3366612.html
了解一下分表基本原理：http://www.discuz.net/thread-2132691-1-1.html
主题分表：
可以任意创建主题存档表（forum_thread_X）
使用“主题移动”功能，筛选符合条件的主题，移动到主题存档表
新发表的主题仍然存于原始表（forum_thread）
移动到存档表中的主题，会在主题所在的版块下建立一个存档区，通过存档区可浏览存档表中的主题。
存档表中的主题，只供浏览，不可回复、评分，不能进行管理操作，但可以删除和移动到非存档区。
帖子分表：
帖子没有存档的概念
可以任意创建帖子分表（分表时创建新表或选择已存在分表）
一次分表操作可移动100MB的整数倍数据
根据主题表中最后回复时间正序排列的主题（first=1）tid 来获取帖子数据的
并将该主题的所有帖子移到目标表中
更新主题表中 posttableid 这个字段，来标识帖子的存储表
关闭论坛
关闭论坛监控
关闭数据库自动备份
主题先不分
第一个 100MB 用了 75 分钟，后来发现问题，数据库恢复了一下
然后1G用了1个半小时，估计恢复的时候顺便“优化”了
转移后打开帖子提示“没有找到帖子”，或者优化后打开帖子提示“没有找到帖子”，只要在数据库里“修复”一下就行了。（在Navicat“对象”中选中所有表，右键分析）
海鲜大部分是冷冻包装产品，小部分是散装称重产品，与超市类似，应选择“商超版”，除了钱箱、扫描枪，还应接电子秤。
触摸屏
不用记键盘快捷键，商品少的话直接点选，连扫码、输码、搜索都省了
好用的收银软件
见下方表格
称重一体
散装商品方便取重
Windows 7 及以上版本 或 安卓 操作系统
安心连网，用于支付宝/微信收款，方便连锁店共享数据。选择 Windows 的话建议选到 win10，因为 win7 将在 2020 年停止支持；新的收银机基本用的安卓，可能因为各种成本低吧，不过听说安卓收银机会卡顿，类似于安卓手机的操作感，核心数和内存跟PC也不是一个概念。
固态硬盘
Windows 建议选固态，开机快；安卓是闪存
销售过程中任何时间使用会员卡，而不是必须先扫会员卡，再扫商品
标签打印机，支持打印价格签（不干胶热敏纸条码），称重商品需要贴上即时生成的条码
支持扫描枪或扫码器扫描客户手机上的支付宝、微信（动态）付款码，以规避客户使用支付成功的截图来欺骗。需要一些配置，提现扣手续费。
支持拼音简码销售
选购步骤 先选择适合自己的收银软件，再选择配置和外观，当然要考虑外接设备的兼容性（电子秤同步称重、软件开钱箱、是否需要标签打印机或后厨打印机、扫描枪是否需要支持支付宝微信 等等）。
注：标签打印机不同于小票打印机，前者用于打印临时标签，可以包含名称、价格、重量、条码等信息，贴于散装称重商品，需选购；后者打印小票给顾客提供购买商品的明细，一般收银机自带。
附：几大收银软件功能对比（从商超的角度分析）注：部分功能可能因配置不同而不同，具体应咨询客服。
| 二维火 | 来钱快 | 美团收银 | |
| 版本 | 餐饮版 商超版 奶茶版：适用连锁店 | 基础版：适用餐饮 零售版：适用超市 专业版：适用连锁餐厅 | |
| 操作系统 | 安卓 | 安卓 | 安卓 |
| 适配触摸屏 | √ | √ | √ |
| 扫描商品条码、支付二维码 | √ | √ | √ |
| 对接外卖平台 | 美团外卖、饿了么、百度外卖 | 美团外卖、饿了么 | 美团外卖 |
| 手机下单 | √ | 免费微店、客户自助点餐 | 收银机点餐、顾客扫码点餐、服务员点餐 |
| 收银方式 | 聚合支付、支付宝、微信、现金 | 现金、支付宝、微信、银联、优惠券组合付款 | 现金、支付宝、微信、优惠券、会员、记账 |
| 会员功能 | 会员等级、积分、折扣、微信公众号营销 | 会员等级、充值、积分、折扣、俏销短信、报表 | 短信、储值、积分 |
| 支持手机 | 火掌柜App | 来钱快App 收银助手 | 美团管理APP |
| 报表 | √ | √ | √ |
| 自制条码（接标签打印机） | 商超版、奶茶版支持 | ||
| 盘点库存 | √ | 手机操作 | 电脑端 |
| 对接电子秤 | √ | 商超版支持 | |
| 连锁店管理 | √ | √ | 专业版支持 |
| 其它特点 | 排队叫号； 自主微信公众号粉丝运营； 小程序点餐 | 免费微信店铺，推广公众号 | 提高美团和大众点评店铺人气； 排队软件； 一店多收银台； |
售价 | 买收银机赠（零售 488 元），免费升级，连锁版每用户 599 元 | 零售版和基础版免费（买收银机赠），专业版收费 | |
| 相关链接 | 来钱快： 杭州萨宝科技： 软件和驱动： | 官方网站： 视频教程： http://shouyin.meituan.com/productGuide | |
| 我的评价 | 界面拟物还不错，具体没有深究 | 公司没有美团有名，但是入行比美团早，产品成熟，创新力强 | 可能更适合于奶茶店类型，对打包、外卖完美适用，有机会试用的话可以给出更客观的评价 |
本文资料整理于 2018 年 7 月
舟山海鲜捕鱼人品牌诚招代理，电话：13646674565（微信同号）
编者按：本文作者 Nick Babich 在文中介绍了几种 “提高” 加载速度的方法。
当我们设计产品的时候，我们没有办法模拟不同的加载速度。因此如果用户等待太长的时间才能看到内容，并不是我们特意的安排。
网速不稳定，尤其是当我们加载图片或音乐时，时间会较长。在这种情况下，我们不得不考虑在这种间隙向用户展示什么内容才能让他们感觉不枯燥。
加载动图（Spinner）效果不佳
加载 Spinner 并不是暗示加载或思考的正确方式。默认加载图标（例如 iOS 的加载动画效果是从中心点辐射的灰色线条）通常具有消极的含义。它们应用于多种操作系统功能之中，包括设备启动、连接到网络或者加载数据。
人们讨厌只看到加载 Spinner，但是却看不多进度或时间。让用户盯着一个下载进度条或者旋转圈会让跳出率提高。
不确定的等待时间比已知的、有限的等待时间让人觉得更长。你应该给你的用户一个清晰地等待时间。
进度条可以告诉用户这个过程需要花费多长时间，但是一般不太正确。你可以通过一些方法隐藏过程中的延迟，例如你可以在开始的时候让速度显示地快一点，在结尾的时候，显示速度慢一点。进度条不应该中断，否则用户就会认为这个 App 卡住了。
后台操作
在后台操作中包含行为有两个优点——用户可见；在用户真正发出请求时就会加载完毕。当程序在后台运营时，给用户呈现一些其他的内容。一个很好的案例是在 Instagram 中加载图片。用户一旦选择想要分享的图片，就开始加载。
在后台加载图片的过程中，Instagram 邀请用户添加标题和标签，当用户准备按 “分享” 键时，加载过程就完成了，这时候就可以立刻分享图片了。
仿真内容和 Placeholder（占位符）
如果你无法缩短加载时间，那么你应该试图让用户在等待中更高兴一点。可以利用这个时间显示一些临时的信息。为了提高用户的参与度，可以使用仿真内容作为文本和图片。
几点小建议：
1、加载屏幕不应该太亮。不需要太吸引眼球。Facebook 的灰色 Placeholder 就是一个很好的例子。当加载内容时使用模板元素，让用户熟悉将要加载的内容的整体结构。
2、如果要加载图片，你可以在 placeholder 中使用加载图片的主色调。Medium 的图片加载效果比较好。首先加载一个小型的模糊图片，然后转化成一个清晰的大图片。
使用 placeholder 和仿真内容并没有加快加载过程，但是在用户眼中加载速度好像变快了。
分散用户的注意力
为了不让用户在等待时感到枯燥，可以适当分散他们的注意力。你可以使用一些有趣的、始料未及的东西吸引用户的注意力，为 App 加载赢得充足的时间。
动画片可以分散访客的注意力，让他们忽略加载时间。
结论
用户讨厌等待，如果你让用户觉得他们没有等待，那么他们就会喜欢你的 App。一定要让用户觉得 App 的加载时间比他预计的短。
- 如何识别 MacBook Pro 机型
- 如何识别 Mac mini 机型
- 查看保修服务和支持范围
也可以查到出厂时间、机器配置等
- Boot Camp：Microsoft Windows 操作系统的系统要求
查看什么设备使用什么版本的 Boot Camp 来安装什么版本的 Windows。
在“受支持的 Windows 版本”中注意这行字“Windows 8：Windows 8 或 8.1、Windows 8 或 8.1 Pro（仅 Boot Camp 5）”，但是我装专业版还是有问题（安装显卡驱动蓝屏），实践经果是跟专业版还是企业版无关。
Boot Camp 的版本必须根据设备和 Windows 版本来定（查表），否则无法安装。
这里仅记录我个人的安装过程，仅供参考。
安装前的准备
手动备份：数据库、浏览器收藏夹、FTP 站点、Navicat 连接、远程桌面、RaiDrive（点登录）、RSS源、虚拟机镜像、“下载”目录、“桌面”目录、开机启动程序、任务计划程序、iPhone 备份（C:\Users\[用户名]\Apple\MobileSync\Backup）、浏览器插件、自动备份中的差异化文件。
推荐的 Edge 扩展（登录账号会自动同步）：Charset、Feedbro、IP Address and Domain Information、JSON Beautifier and Editor、Kimi 浏览器助手、JSONView、Pretty Js、User-Agent Switcher and Manager、Wappalyzer、图片助手(ImageAssistant) 批量图片下载器、猫抓、网页更新提醒、xoyozo 的冲浪助手
桌面图标和开始菜单截图。桌面如果是手动排序图标的，先按分类归入文件夹，以方便系统恢复后按分类摆放。
备份：桌面、Chrome 用户目录、聊天记录、快捷回复、项目、hosts 文件。
像 QQ、TIM、微信、旺旺、千牛 等即时聊天工具，最好将数据文件目录拷贝一份（包含图片视频等），再打开软件登录帐号进行记录备份（一般不含图片视频等）。这样，在重装系统后，如果还原拷贝的聊天文件不能供聊天软件使用，可以用备份数据恢复。
备份剪映目录，否则重装后需要重新下载素材/字体等，位置：C:\用户\AppData\Local\JianyingPro\User Data\
备份到移动硬盘或 NAS
排查以上未提及的新软件或新设置是否有需要处理或备份的。
清空回收站
确定系统盘所在硬盘和分区和大小，避免在格式化时选错硬盘分区。
外星人电脑开机按 F2 进入 BIOS，F12 选择启动设备。
设置
这台电脑（右键）- 属性 - 高级系统设置 - 高级 - 性能设置 - 高级 - 更改 - 去掉“自动管理所有驱动器的分布文件大小”前的勾，选择 SSD 分区的分布文件为系统管理的大小，点设置，其它分区无分布文件，点设置 - 确定
以上是在 SSD 空间足够的情况下，如果不足，那么可以分配到其它分区。
Windows 更新、并在高级选项中开启（更新 Windows 时接收其它 Microsoft 产品的更新）
安装驱动
目前的 Windows Update 已经可以安装大部分驱动了，如果设备管理器中还有警示图标，或者有些硬件功能不能启用，那么可以前往对应品牌的官网下载，如联想驱动安装工具、戴尔驱动程序，其它可使用驱动精灵。
安装 Office
安装 Office 批量授权版
立即安装即可，不要更改路径。
恢复数据
Chrome 目录（C:\Users\[用户名]\AppData\Local\Google\Chrome\User Data\Default\）
QQ 记录（默认路径：C:\Users\[用户名]\Documents\Tencent Files）
微信记录（默认路径：C:\Users\[用户名]\Documents\WeChat Files），微信记录可能会不能使用
视情况删除非系统盘的 \Program Files、\Program Files (x86)、\Users\xoyozo\AppData 等
应用程序
安装 Edge。
先安装 SQL Server，再安装 Visual Studio（如欲同时安装低版本 VS，先安装低版本，再安装高版本）
安装 Adobe
安装其它软件
替换 hosts，若出现安全软件警告，信任即可。
激活 Windows、Office、Adobe 等：
嗯
细节
Win10 任务栏单击“文件资源管理器”打开“此电脑”的设置方法：打开任意文件资源管理器窗口，菜单 - 查看 - 选项，将“打开文件资源管理器时打开”改为“此电脑”
Win10 任务栏日期显示星期：控制面板 - 更改日期、时间和数字格式 - 其他设置 - 日期，将短日期改为：yyyy/M/d ddd
随系统启动程序的目录（所有用户）：C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp
随系统启动程序的目录（单个用户）：C:\用户\[用户名]\AppData\Roaming\Microsoft\Windows\「开始」菜单\程序\启动，（即：C:\Users\[用户名]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup）
自带的微软五笔已经提供五笔拼音混打了，所以抛弃QQ五笔了
设置 Navicat 自动运行。
设置电源相关
SQL Server 按需设置启动/禁用：SQL Server 配置管理器 - SQL Server 服务 - 右侧双击选择实例 - 切换到“服务”选项卡 - 启动模式
先上代码
DataClassesXDataContext db = new DataClassesXDataContext();
// 使用 let 关键字
DateTime dt = DateTime.Now;
var q1 = (from z in db.dtZone
let adCount = db.dtAD.Count(ad => ad.iZone == z.ID)
select new
{
z.ID,
adCount,
}).Take(10).ToList();
Response.Write((DateTime.Now - dt) + "<br />");
// 先 Select 后 Take
dt = DateTime.Now;
var q2 = (from z in db.dtZone
select new
{
z.ID,
adCount = db.dtAD.Count(ad => ad.iZone == z.ID),
}).Take(10).ToList();
Response.Write((DateTime.Now - dt) + "<br />");
// 先 Take 后 Select
dt = DateTime.Now;
var q3 = (from z in db.dtZone
select new { z.ID }).Take(10).ToList().Select(z => new
{
z.ID,
adCount = db.dtAD.Count(ad => ad.iZone == z.ID),
}).ToList();
Response.Write((DateTime.Now - dt) + "<br />");在一个有 365 行记录的 dtZone 表和 5700 行记录的 dtAD 的数据库中进行嵌套查询（远程），同样取 10 条 dtZone 记录及对应的 dtAD 数，结果表明前两种执行时间相差无几，第二种略快，但第三种由于进行了多次查询，消耗的时间接近于前两种的 10 倍。结果仅供参考。
Android 系统要求每一个安装进系统的应用程序都是经过数字证书签名的，数字证书的私钥则保存在程序开发者的手中。Android 系统将数字证书用于在应用程序的作者和应用程序之间建立信任关系，但并不用于决定最终用户可以安装哪些应用程序。这个数字证书并不需要权威的数字证书签名机构认证，它只是用于应用程序包自我认证的。
Android 数字证书包含以下几个要点：
（1）所有的应用程序都必须有数字证书，Android 系统不会安装一个没有数字证书的应用程序
（2）Android 程序包使用的数字证书可以是自签名的，不需要一个权威的数字证书机构签名认证
（3）如果要正式发布一个 Android 应用程序安装包，必须使用一个合适的私钥生成的数字证书来给程序签名，而不能使用如 ant 工具等生成的调试证书来发布。
（4）数字证书包含应用程序所有者姓名，所在组织，国家，证书创建时间，证书有效期等信息。
（5）Android 使用标准的 Java 工具 Keytool and Jarsigner 来生成数字证书，并给应用程序包签名。
（6）Android 数字证书跟包名无关，多个不同包名的应用程序安装包可使用同一个数字证书对其进行签名。
（7）Android 系统不会覆盖安装运行包名相同，签名证书不同的两个安装包。
注意：如果您的 App 已经上线 Android 市场，或者已经正式发布，有用户已经正式使用了，切勿再更换签名证书，否则，App 在自动更新覆盖安装升级时，Android 系统将会认为新签名证书的 App 安装包是“非法签名”的 App，而不予安装，导致更新失败，流失用户。
最近有服务器不时出现的CPU使用率超高，内存几乎被吃光，系统甚至自动kill掉一些进程，如sshd，vsftpd等。用top查看，PHP-CGI进程高挂不下，如下是解决方案：
一、进程跟踪
# top //找出CPU使用率高的进程PID
# strace -p PID //跟踪进程
# ll /proc/PID/fd //查看该进程在处理哪些文件
将有可疑的PHP代码修改之，如：file_get_contents没有设置超时时间。
二、内存分配
如果进程跟踪无法找到问题所在，再从系统方面找原因，会不会有可能内存不够用？据说一个较为干净的PHP-CGI打开大概20M-30M左右的内存，决定于PHP模块开启多少。
通过pmap指令查看PHP-CGI进程的内存使用情况
# pmap $(pgrep php-cgi |head -1)
按输出的结果，结合系统的内存大小，配置PHP-CGI的进程数（max_children）。
三、监控
最后，还可以通过监控与自动恢复的脚本保证服务的正常运转。下面是我用到的一些脚本：
只要一个php-cgi进程占用的内存超过 %1 就把它kill掉
#!/bin/sh
PIDS=`ps aux|grep php-cgi|grep -v grep|awk’{if($4>=1)print $2}’`
for PID in $PIDS
do
echo `date +%F….%T`>>/data/logs/phpkill.log
echo $PID >> /data/logs/phpkill.log
kill -9 $PID
done
检测php-fpm进程
#!/bin/bash
netstat -tnlp | grep “php-cgi” >> /dev/null #2&> /data/logs/php_fasle.log
if [ "$?" -eq "1" ];then #&& [ `netstat -tnlp | grep 9000 | awk '{ print $4}' | awk -F ":" '{print $2}'` -eq "1" ];then
/usr/local/webserver/php/sbin/php-fpm start
echo `date +%F….%T` “System memory OOM.Kill php-cgi. php-fpm service start. ” >> /data/logs/php_monitor.log
fi
通过http检测php执行
#!/bin/bash
status=`curl -s –head “http://127.0.0.1:8080/chk.php” | awk ‘/HTTP/ {print $2}’`
if [ $status != "200" -a $status != "304" ]; then
/usr/local/webserver/php/sbin/php-fpm restart
echo `date +%F….%T` “php-fpm service restart” >> /data/logs/php_monitor.log
fi
编者按：今天腾讯万技师同学的这篇技术总结必须强烈安利下，目录清晰，层次分明，每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散，帮你直观把这些知识点get起来。以现在HTML 5的势头，同志们，你看到的这些，可都是钱呐。
十二年前，无论多么复杂的布局，在我们神奇的table面前，都不是问题；
十年前，阿捷的一本《网站重构》，为我们开启了新的篇章；
八年前，我们研究yahoo.com，惊叹它在IE5下都表现得如此完美；
六年前，Web标准化成了我们的基础技能，我们开始研究网站性能优化；
四年前，我们开始研究自动化工具，自动化测试，谁没玩过nodejs都不好意思说是页面仔；
二年前，各种终端风起云涌，响应式、APP开发都成为了我们研究的范围，CSS3动画开始风靡；
如今，CSS3动画、Canvas、SVG、甚至webGL你已经非常熟悉，你是否开始探寻，接下来，我们可以玩什么，来为我们项目带来一丝新意？
没错，本文就是以HTML5 Device API为核心，对HTML5的一些新接口作了一个完整的测试，希望能让大家有所启发。
目录：
一、让音乐随心而动 – 音频处理 Web audio API
二、捕捉用户摄像头 – 媒体流 Media Capture
三、你是逗逼？ – 语音识别 Web Speech API
四、让我尽情呵护你 – 设备电量 Battery API
五、获取用户位置 – 地理位置 Geolocation API
六、把用户捧在手心 – 环境光 Ambient Light API
七、陀螺仪 Deviceorientation
八、Websocket
九、NFC
十、震动 - Vibration API
十一、网络环境 Connection API
一、让音乐随心而动 – 音频处理 Web audio API
简介：
Audio对象提供的只是音频文件的播放，而Web Audio则是给了开发者对音频数据进行分析、处理的能力，比如混音、过滤。
系统要求：
ios6+、android chrome、android firefox
实例：
http://sy.qq.com/brucewan/device-api/web-audio.html
核心代码：
var context = new webkitAudioContext();
var source = context.createBufferSource(); // 创建一个声音源
source.buffer = buffer; // 告诉该源播放何物
createBufferSourcesource.connect(context.destination); // 将该源与硬件相连
source.start(0); //播放
技术分析：
当我们加载完音频数据后，我们将创建一个全局的AudioContext对象来对音频进行处理，AudioContext可以创建各种不同功能类型的音频节点AudioNode，比如
1、源节点（source node）
我们可以使用两种方式加载音频数据：
<1>、audio标签
var sound, audio = new Audio();
audio.addEventListener('canplay', function() {
sound = context.createMediaElementSource(audio);
sound.connect(context.destination);
});
audio.src = '/audio.mp3';
<2>、XMLHttpRequest
var sound, context = createAudioContext();
var audioURl = '/audio.mp3'; // 音频文件URL
var xhr = new XMLHttpRequest();
xhr.open('GET', audioURL, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
context.decodeAudioData(request.response, function (buffer) {
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
}
}
xhr.send();
2、分析节点（analyser node）
我们可以使用AnalyserNode来对音谱进行分析，例如：
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var analyser = audioCtx.createAnalyser();
analyser.fftSize = 2048;
var bufferLength = analyser.frequencyBinCount;
var dataArray = new Uint8Array(bufferLength);
analyser.getByteTimeDomainData(dataArray);
function draw() {
drawVisual = requestAnimationFrame(draw);
analyser.getByteTimeDomainData(dataArray);
// 将dataArray数据以canvas方式渲染出来
};
draw();
3、处理节点（gain node、panner node、wave shaper node、delay node、convolver node等）
不同的处理节点有不同的作用，比如使用BiquadFilterNode调整音色（大量滤波器）、使用ChannelSplitterNode分割左右声道、使用GainNode调整增益值实现音乐淡入淡出等等。
需要了解更多的音频节点可能参考：
https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
4、目的节点（destination node）
所有被渲染音频流到达的最终地点
思维发散：
1、可以让CSS3动画跟随背景音乐舞动，可以为我们的网页增色不少；
2、可以尝试制作H5酷酷的变声应用，增加与用户的互动；
3、甚至可以尝试H5音乐创作。
看看google的创意：http://v.youku.com/v_show/id_XNTk0MjQyNDMy.html
二、捕捉用户摄像头 – 媒体流 Media Capture
简介：
通过getUserMedia捕捉用户摄像头获取视频流和通过麦克风获取用户声音。
系统要求：
android chrome、android firefox
实例：
捕获用户摄像头 捕获用户麦克风
http://sy.qq.com/brucewan/device-api/camera.html
http://sy.qq.com/brucewan/device-api/microphone-usermedia.html
核心代码：
1、摄像头捕捉
navigator.webkitGetUserMedia ({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, function(e){
})
2、从视频流中拍照
btnCapture.addEventListener('touchend', function(){
if (localMediaStream) {
canvas.setAttribute('width', video.videoWidth);
canvas.setAttribute('height', video.videoHeight);
ctx.drawImage(video, 0, 0);
}
}, false);
3、用户声音录制
navigator.getUserMedia({audio:true}, function(e) {
context = new audioContext();
audioInput = context.createMediaStreamSource(e);
volume = context.createGain();
recorder = context.createScriptProcessor(2048, 2, 2);
recorder.onaudioprocess = function(e){
recordingLength += 2048;
recorder.connect (context.destination);
}
}, function(error){});
4、保存用户录制的声音
var buffer = new ArrayBuffer(44 + interleaved.length * 2);
var view = new DataView(buffer);
fileReader.readAsDataURL(blob); // android chrome audio不支持blob
… audio.src = event.target.result;
思维发散：
1、从视频拍照自定义头像；
2、H5视频聊天；
3、结合canvas完成好玩的照片合成及处理；
4、结合Web Audio制作有意思变声应用。
三、你是逗逼？ – 语音识别 Web Speech API简介：
1、将文本转换成语音；
2、将语音识别为文本。
系统要求：
ios7+，android chrome，android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/microphone-webspeech.html
核心代码：
1、文本转换成语音，使用SpeechSynthesisUtterance对象；
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.volume = 1; // 0 to 1
msg.text = ‘识别的文本内容’;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
2、语音转换为文本，使用SpeechRecognition对象。
var newRecognition = new webkitSpeechRecognition();
newRecognition.onresult = function(event){
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
final_transcript += event.results[i][0].transcript;
}
};
测试结论：
1、Android支持不稳定；语音识别测试失败（暂且认为是某些内置接口被墙所致）。
思维发散：
1、当语音识别成为可能，那声音控制将可以展示其强大的功能。在某些场景，比如开车、网络电视，声音控制将大大改善用户体验；
2、H5游戏中最终分数播报，股票信息实时声音提示，Web Speech都可以大放异彩。
四、让我尽情呵护你 – 设备电量 Battery API简介：
查询用户设备电量及是否正在充电。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/battery.html
核心代码：
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery || navigator.msBattery;
var str = '';
if (battery) {
str += '<p>你的浏览器支持HTML5 Battery API</p>';
if(battery.charging) {
str += '<p>你的设备正在充电</p>';
} else {
str += '<p>你的设备未处于充电状态</p>';
}
str += '<p>你的设备剩余'+ parseInt(battery.level*100)+'%的电量</p>';
} else {
str += '<p>你的浏览器不支持HTML5 Battery API</p>';
}
测试结论：
1、QQ浏览器与UC浏览器支持该接口，但未正确显示设备电池信息；
2、caniuse显示android chrome42支持该接口，实测不支持。
思维发散：
相对而言，我觉得这个接口有些鸡肋。
很显然，并不合适用HTML5做电池管理方面的工作，它所提供的权限也很有限。
我们只能尝试做一些优化用户体验的工作，当用户设备电量不足时，进入省电模式，比如停用滤镜、摄像头开启、webGL、减少网络请求等。
五、获取用户位置 – 地理位置 Geolocation简介：
Geolocation API用于将用户当前地理位置信息共享给信任的站点，目前主流移动设备都能够支持。
系统要求：
ios6+、android2.3+
测试实例：
http://sy.qq.com/brucewan/device-api/geolocation.html
核心代码：
var domInfo = $("#info");
// 获取位置坐标
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
domInfo.innerHTML="抱歉，你的浏览器不支持地理定位！";
}
// 使用腾讯地图显示位置
function showPosition(position) {
var lat=position.coords.latitude;
var lon=position.coords.longitude;
mapholder = $('#mapholder')
mapholder.style.height='250px';
mapholder.style.width = document.documentElement.clientWidth + 'px';
var center = new soso.maps.LatLng(lat, lon);
var map = new soso.maps.Map(mapholder,{
center: center,
zoomLevel: 13
});
var geolocation = new soso.maps.Geolocation();
var marker = null;
geolocation.position({}, function(results, status) {
console.log(results);
var city = $("#info");
if (status == soso.maps.GeolocationStatus.OK) {
map.setCenter(results.latLng);
domInfo.innerHTML = '你当前所在城市: ' + results.name;
if (marker != null) {
marker.setMap(null);
}
// 设置标记
marker = new soso.maps.Marker({
map: map,
position:results.latLng
});
} else {
alert("检索没有结果，原因: " + status);
}
});
}
测试结论：
1、Geolocation API的位置信息来源包括GPS、IP地址、RFID、WIFI和蓝牙的MAC地址、以及GSM/CDMS的ID等等。规范中没有规定使用这些设备的先后顺序。
2、初测3g环境下比wifi环境理定位更准确；
3、测试三星 GT-S6358(android2.3) geolocation存在，但显示位置信息不可用POSITION_UNAVAILABLE。
六、把用户捧在手心 – 环境光 Ambient Light简介：
Ambient Light API定义了一些事件，这些时间可以提供源于周围光亮程度的信息，这通常是由设备的光感应器来测量的。设备的光感应器会提取出辉度信息。
系统要求：
android firefox
测试实例：
http://sy.qq.com/brucewan/device-api/ambient-light.html
核心代码：
这段代码实现感应用前当前环境光强度，调整网页背景和文字颜色。
var domInfo = $('#info');
if (!('ondevicelight' in window)) {
domInfo.innerHTML = '你的设备不支持环境光Ambient Light API';
} else {
var lightValue = document.getElementById('dl-value');
window.addEventListener('devicelight', function(event) {
domInfo.innerHTML = '当前环境光线强度为：' + Math.round(event.value) + 'lux';
var backgroundColor = 'rgba(0,0,0,'+(1-event.value/100) +')';
document.body.style.backgroundColor = backgroundColor;
if(event.value < 50) {
document.body.style.color = '#fff'
} else {
document.body.style.color = '#000'
}
});
}
思维发散：
该接口适合的范围很窄，却能做出很贴心的用户体验。
1、当我们根据Ambient Light强度、陀螺仪信息、当地时间判断出用户正躺在床上准备入睡前在体验我们的产品，我们自然可以调整我们背景与文字颜色让用户感觉到舒适，我们还可以来一段安静的音乐，甚至使用Web Speech API播报当前时间，并说一声“晚安”，何其温馨；
2、该接口也可以应用于H5游戏场景，比如日落时分，我们可以在游戏中使用安静祥和的游戏场景；
3、当用户在工作时间将手机放在暗处，偷偷地瞄一眼股市行情的时候，我们可以用语音大声播报，“亲爱的，不用担心，你的股票中国中车马上就要跌停了”，多美的画面。
参考文献：
https://developer.mozilla.org/en-US/docs/Web/API
http://webaudiodemos.appspot.com/
http://www.w3.org/2009/dap/