博客 (15)

最近做到微信语音时用到，将微信的媒体文件（.amr）下载到自己服务器上，并转码为 .mp3 格式。

引用“NAudio.dll”或直接搜索 NuGet 包，将音频文件转码为 .mp3 只需要：

var data = new MediaFoundationReader("..\\amr\\test.amr");
MediaFoundationEncoder.EncodeToMP3(data, "..\\test.mp3", 码率默认192000);

若出现异常：

无法加载 DLL“mfplat.dll”: 找不到指定的模块。

原因是没有安装音频解码组件，以 Windows Server 2012 R2 为例：

打开“服务器管理器”，添加角色和功能，勾选“桌面体验”（可能在“用户界面和基础结构”，默认还会勾上“墨迹和手写服务”）

安装完成需要重启计算机。

若出现异常：

不支持给定的 URL 的字节流类型。 (异常来自 HRESULT:0xC00D36C4)

原因可能是没有能够播放 .amr 的解码器，或音频驱动！

如果还是搞不定，本站搜索 ffmpeg 吧！

如果使用了 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

http://www.w3school.com.cn/html5/html5_video.asp

软件名称	价格	软件介绍
ProPresenter	试用 / $399	一款跨平台（Mac、Windows），专为高品质现场（包括晚会、体育赛事、会议等）打造字幕及多媒体展示的软件。 （试用版是全功能的，但输出窗口有水印，试用期两周）
Sports Sounds Pro	免费 / $149.95	一款专业用于现场事件的音控软件。 （免费版是全功能的，仅有一些限制，比如：只能播放 10 组中每组的前 3 页的第 1 行，而且只能放置 180 个按钮）
Miro Video Converter	免费	可以导出兼容 HTML5 网页播放的视频格式（.mp4）。
Vistumbler	免费	无线网络扫描工具。
VNC	免费 / $30 / $40	Mac 上优秀的远程桌面软件。
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盘解决方案

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

版本区别

功能特性	Windows RT	Windows 8 (标准版)	Windows8 Pro （专业版）	Windows 8 Enterprise （企业版）
与现有Windows 兼容	无	有	有	有
购买渠道	在设备上预装	大多数渠道	大多数渠道	经过认证的客户
架构	ARM (32-bit)	IA-32 (32-bit) or x86-64 (64-bit)	IA-32 (32-bit) or x86-64 (64-bit)	IA-32 (32-bit) or x86-64 (64-bit)
安全启动	有	有	有	有
图片密码	有	有	有	有
开始界面、动态磁帖以及相关效果	有	有	有	有
触摸键盘、拇指键盘	有	有	有	有
语言包	有	有	有	有
更新的资源管理器	有	有	有	有
标准程序	有	有	有	有
文件历史	有	有	有	有
系统的重置功能	有	有	有	有
Play To “播放至”功能	有	有	有	有
Connected standby保持网络连接的待机	有	有	有	有
Windows Update	有	有	有	有
Windows Defender	有	有	有	有
增强的多显示屏支持	有	有	有	有
新的任务管理器	有	有	有	有
ISO 镜像 and VHD 挂载	有	有	有	有
移动通信功能	有	有	有	有
Microsoft 账户	有	有	有	有
Internet Explorer 10	有	有	有	有
SmartScreen	有	有	有	有
Windows 商店	有	有	有	有
Xbox Live 程序 (包括 Xbox Live Arcade)	有	有	有	有
Exchange ActiveSync	有	有	有	有
快速睡眠(snap)	有	有	有	有
VPN连接	有	有	有	有
Device encryption	有	无	无	无
随系统预装的Microsoft Office	有	无	无	无
桌面	部分	有	有	有
储存空间管理（storage space）	无	有	有	有
Windows Media Player	无	有	有	有
Windows Media Center	无	无	需另行添加	无
远程桌面	只作客户端	只作客户端	客户端和服务端	客户端和服务端
从VHD启动	无	无	有	有
BitLocker and BitLocker To Go	无	无	有	有
文件系统加密	无	无	有	有
加入Windows 域	无	无	有	有
组策略	无	无	有	有
AppLocker	无	无	有	有
Hyper-V	无	无	仅64bit支持
Windows To Go	无	无	无	有
DirectAccess	无	无	无	有
分支缓存(BranchCache)	无	无	无	有
以RemoteFX提供视觉特效	无	无	无	有
Metro风格程序的部署	无	无	无	有

下载地址

根据下面的 SHA1 或文件名在网上搜索下载地址，下载完成后验证其 SHA1 即可。

Windows 8 (x86) - DVD (Chinese-Simplified)
文件名： cn_windows_8_x86_dvd_915414.iso
SHA1: 0C4A168E37E38EFB59E8844353B2535017CBC587


Windows 8 (x64) - DVD (Chinese-Simplified)
文件名： cn_windows_8_x64_dvd_915407.iso
SHA1: A87C4AA85D55CD83BAE9160560D1CB3319DD675C


Windows 8 Pro VL (x86) - DVD (Chinese-Simplified)
文件名： cn_windows_8_pro_vl_x86_dvd_917720.iso
SHA1: EEEF3C3F6F05115C7F7C9C1D19D6A6A6418B5059


Windows 8 Pro VL (x64) - DVD (Chinese-Simplified) 推荐
文件名： cn_windows_8_pro_vl_x64_dvd_917773.iso
SHA1: 9C4EC9FC4FB561F841E22256BC9DEA6D9D6611FF


Windows 8 Enterprise (x86) - DVD (Chinese-Simplified)
文件名： cn_windows_8_enterprise_x86_dvd_917682.iso
SHA1: 951565D8579C5912FB4A407B3B9F715FBDB77EFE


Windows 8 Enterprise (x64) - DVD (Chinese-Simplified)
文件名： cn_windows_8_enterprise_x64_dvd_917570.iso
SHA1: 1280BC3A38A7001FDE981FA2E465DEB341478667

激活方式

目前流行 KMSmicro 激活，写此文时的最新版本是 4.0，下载地址网上搜之（或联系我）。