博客 (312)

本文适用于 IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10 等 Web 服务器,IIS 6(Windows Server 2003)用户请查阅 ISAPI_Rewrite。

在 IIS 中要实现 URL 重写,需要下载并安装 URL Rewrite 组件,http://www.iis.net/downloads/microsoft/url-rewrite

IIS 管理器中选中任意网站,主窗口可见“URL 重写”,双击打开。(如果你想配置这台服务器的所有网站有效,直接选中左侧菜单中的服务器名,打开“URL 重写”即可。)

右侧“添加规则...”,选择“入站规则”中的“空白规则”,确定。

填写规则名称,在“匹配 URL”框中选择“与模式匹配”,根据自己的需求选择“正则表达式”、“通配符”或“完全匹配”,“模式”中填写要防盗链的文件路径规则,例如正则表达式 ^.*\.(jpg|png)$ 将匹配所有目录下的 .jpg 和 .png 文件。

接下来将设置图片在允许的域名下显示。

在“条件”框中选择“全部匹配”,点击“添加”,“条件输入”中填写“{HTTP_REFERER}”(不含引号,含花括号),表示判断 HTTP 请求中 Header 的 Referer。选择“与模式不匹配”,模式中填写匹配规则,如 ^$ 表示允许 Referer 为空(如直接从浏览器打开的情况),再加一个规则 ^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$ 表示允许在 xoyozo.net 和 himiao.com 这两个域名下显示图片。当然如果你有很多域名或需要设置不同的规则,可以继续添加,但最好把访问量大的规则移到前面,从而减少系统匹配次数,提高访问效率。

最后,在“操作”框中设置你想要的处理方式,可以是“重定向”到一张防盗链提醒的图片上(推荐类型临时 307),也可以自定义响应,例如,状态代码(403),子代码(0),原因(Forbidden: Access is denied.),描述(You do not have permission to view this directory or page using the credentials that you supplied.),查看 HTTP 状态代码

如果你是配置某个网站的“URL 重写”,那么在网站根目录下的 web.config 文件中,<system.webServer /> 节点下可以看到刚刚配置的规则,例如:

<rewrite>
  <rules>
    <rule name="RequestBlockingRule1" stopProcessing="true">
      <match url="^.*\.(jpg|png)$" />
      <conditions>
        <add input="{HTTP_REFERER}" pattern="^https?://([^/]*\.)?(xoyozo.net|himiao.com)/.*$" negate="true" />
        <add input="{HTTP_REFERER}" pattern="^$" negate="true" />
      </conditions>
      <action type="Redirect" url="http://42.96.165.253/logo2013.png" redirectType="Temporary" />
    </rule>
  </rules>
</rewrite>
xoyozo 10 年前
7,903
软件名称价格软件介绍
ProPresenter试用 / $399一款跨平台(Mac、Windows),专为高品质现场(包括晚会、体育赛事、会议等)打造字幕及多媒体展示的软件。
(试用版是全功能的,但输出窗口有水印,试用期两周)
Sports Sounds Pro免费 / $149.95一款专业用于现场事件的音控软件。
(免费版是全功能的,仅有一些限制,比如:只能播放 10 组中每组的前 3 页的第 1 行,而且只能放置 180 个按钮)
Miro Video Converter免费可以导出兼容 HTML5 网页播放的视频格式(.mp4)。
Vistumbler免费无线网络扫描工具。
VNC免费 / $30 / $40Mac 上优秀的远程桌面软件。

TreeSize Free

免费快速扫描目录大小和空间占用
IconWorkshop试用 / 购买优秀的 ICO、ICON 制作软件,专业图标制作,编辑,转换工具

GoldWave

$19 / $59功能强大的数字音乐编辑器,是一个集声音编辑、播放、录制和转换的音频工具。
EasyRecovery EasyRecovery 是由全球著名数据厂商 Kroll Ontrack 出品的一款数据文件恢复软件。支持恢复不同存储介质数据:硬盘、光盘、U盘、移动硬盘、数码相机、手机、Raid 文件恢复等,能恢复包括文档、表格、图片、音视频等各种文件。
DiskGenius 一款专业级的数据恢复软件,算法精湛、功能强大!支持多种情况下的文件丢失、分区丢失恢复;支持文件预览;支持扇区编辑、RAID 恢复等高级数据恢复功能。
sagethumbs免费预览 PSD 文件
WebP Codec for Windows免费预览 WebP 文件
ventoy免费多系统启动U盘解决方案
xoyozo 10 年前
7,523
xoyozo 12 年前
4,823

本教程使用 U 盘 OS X 启动盘和 U 盘 Windows 安装盘,硬盘安装稍有不同。

系统安装前

准备工作

制作系统盘

  • 如果 OS X 系统已经无法进入,则只能用 Internet Recovery 重装了(联网下载 5G 左右的安装包)。否则可以进入 OS X,从 App Store 下载最新的 OS X 安装包制作 USB 启动盘。

  • 制作 USB OS X 启动盘教程:适用于 Mavericks(10.9) 及更旧版本适用于 Yosemite(10.10) 及更新版本

  • 使用 OS X 的 Boot Camp 助手制作 U 盘 Windows 安装盘(若使用一般的 Windows 安装盘,安装完成后会遇到无法安装 Boot Camp 的问题,即使是正确的版本)

 

安装 OS X

版本

  • 本文适用且不限于 OS X 10.8.4 - 10.9.3

分区与安装

  • 插入 USB OS X 启动盘,开机,出现白屏即按住 option / Alt 键,选择相应的启动盘(联网恢复方式:开机按“option”+“command”+“R”,在磁盘工具分区时如果遇到“未能卸载磁盘”,就可以用联网恢复的方式重新分区)

  • 进入磁盘工具,分区:3 个分区:(安装 OS X 的分区必须放在最后)

  • 选中第 3 个分区:Macintosh HD,Mac OS 扩展(日志式),100G,选项:GUID 分区表,用于安装 OS X

  • 选中第 2 个分区:BOOTCAMP,MS-DOS(FAT),100G,用于安装 Windows

  • 选中第 1 个分区:DATA,ExFAT,用于存放数据(公共盘)

  • 应用,退出磁盘工具,选择重新安装 OS X,选择安装在 Macintosh HD 分区

  • 等待约 30 分钟安装完成

  • Finder 中推出并拔除 USB OS X 启动盘

 

安装 Windows

安装

  • 插入 USB Windows 安装盘

  • 在 OS X 中进入:系统偏好设置 - 启动磁盘 - 选择 USB Windows 启动盘 或者 重新启动系统 - 响完“当”且白屏前按住 Option 或 Alt 键,选择 USB 图标的 Windows 项(不是 EFI Boot 那项)

  • 全新安装,选中 BOOTCAMP 分区并格式化,安装。(注:[待测]下次尝试删除全部分区并重新分区,如果能安装并启动成功,就是没有 OS X 的 Windows 单系统了。由于制作 U 盘 OS X 启动盘和 Windows 安装盘都需要在 OS X 环境下进行,所以必须权衡是否真的只需要单系统,否则下次只能用 Internet Recovery 方式重装了)

  • 安装完成后,安装 Boot Camp 支持软件(已集成到 Windows 安装盘内)

  • 必须通过右下角的 Boot Camp 来重启进入 OS X,否则在移除 USB Windows 安装盘的情况下无法进入各系统。(此条为真?待测)

  • 正常弹出并拔除 USB Windows 安装盘

 

其它

Apple Wireless Keyboard

  • 确保设备管理器的蓝牙设备中有 Apple 字样的驱动名称(即蓝牙驱动是通过 Boot Camp 安装的)

  • 打开键盘电源

  • 右击 Windows 任务栏小图标中的蓝牙图标,添加新设备

  • 配对

xoyozo 12 年前
11,142

这里仅记录我个人的安装过程,仅供参考。

安装前的准备

  • 手动备份:数据库、浏览器收藏夹、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

  • 如何在 Windows 11 任务栏时间上显示“秒”

  • 随系统启动程序的目录(所有用户):C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp

  • 随系统启动程序的目录(单个用户):C:\用户\[用户名]\AppData\Roaming\Microsoft\Windows\「开始」菜单\程序\启动,(即:C:\Users\[用户名]\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

  • 自带的微软五笔已经提供五笔拼音混打了,所以抛弃QQ五笔了

  • Win10系统怎样让打开图片方式为照片查看器

  • 设置 Navicat 自动运行。

  • 设置电源相关

  • SQL Server 按需设置启动/禁用:SQL Server 配置管理器 - SQL Server 服务 - 右侧双击选择实例 - 切换到“服务”选项卡 - 启动模式


xoyozo 12 年前
20,018

先上代码

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 倍。结果仅供参考。

xoyozo 10 年前
4,445

使用 SQL 语句

 

select count(*) from master.dbo.sysprocesses

或者

sp_who

 

使用 SQL Server Management Studio 查看“活动监视器”

 

SQL Server 2005

在 SQL Server Management Studio 中,使用对象资源管理器连接到服务器,展开“管理”,然后双击“活动监视器”

 

SQL Server 2008 R2 / SQL Server 2012 / SQL Server 2014

在 SQL Server Management Studio 中,在对象资源管理器中,右键单击相应的实例名称,然后选择“活动和监视器”。

 

参考:如何打开活动监视器 (SQL Server Management Studio)

 

xoyozo 10 年前
7,703

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,而不予安装,导致更新失败,流失用户。
A
转自 APICloud 10 年前
5,779

本教程使用的软件版本:

VMware Workstation 12 Pro for Windows

Mac OS X Unlocker for VMware V2.0.6
一个能让虚拟机 VMware 安装 OS X 系统的解锁补丁

OS X 10.10.5 Yosemite (14F27) 懒人版 CDR 镜像
CRC32: C7E1E915
MD5: A76FF6E43058A40182435D274D9EB976
SHA-1: 7DDC194E779B003AFDCF2B7C11BEB6D4443F8D72

安装步骤:

1、安装 VMware Workstation

2、新建虚拟机:选择 典型 - 稍后安装操作系统,当然现在还看不到 Apple Mac OS X,先退出 VMware

3、安装 Unlocker

4、重复第 2 步,选择 Apple Mac OS X,并选择对应的 OS X 版本,后续跟据情况自行配置

5、编辑虚拟机设置 - CD/DVD(SATA) - 使用 ISO 镜像文件 - 浏览 - 所有文件(*.*),定位到 .cdr 镜像文件

6、开启此虚拟机

7、如果报错:VMware Workstation 不可恢复错误: (vcpu-0),打开新建虚拟机时指定的位置(默认在 C:\Users\用户名\Documents\Virtual Machines\虚拟机名\),用记事本打开 .vmx 文件,添加一条配置:smc.version = "0",保存关闭后重新开启虚拟机

8、如果屏幕中央出现一个禁止的图标,那么表示当前版本的 VMware 不支持安装当前版本的 OS X

9、如果在“选择要安装到的磁盘”界面仅列出了镜像文件而无法继续安装,请在窗口顶部的菜单栏中选择 实用工具 - 磁盘工具,选中新建虚拟机时创建的磁盘,切换到“分区”选项卡进行分区操作,简单地可以选择“1 个分区”,点击“应用”、“分区”,退出磁盘工具。现在可以把 OS X 安装在刚刚创建的分区上了

10、继续愉快地安装和使用 OS X 吧!

使用此方法将 OS X 安装到物理磁盘并支持开机直接运行,请参考此文:超详细 (60P)利用虚拟机安装10.9.4(懒人版)到真机教程

xoyozo 10 年前
5,244

tgideas-html5-api-test-1-1

编者按:今天腾讯万技师同学的这篇技术总结必须强烈安利下,目录清晰,层次分明,每个接口都有对应的简介、系统要求、实例、核心代码以及超实用的思维发散,帮你直观把这些知识点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/

转自 万技师 11 年前
4,383