者：Darrell Etherington

根据Bernstein Research公司分析师Toni Sacconaghi Jr的观点，在HTML5的影响下，2015年苹果营业利润增长可能会遭受30%的损失。Forrester Research公司也曾指出，HTML5的出现还将影响苹果通过原生应用中收获的利润。但从以下两个原因可以看出，业内人士不应该低估iOS原生应用的长远吸引力：

1.原生应用能够突破其局限性

人们之所以认为HTML5将取代iPad和iPhone设备中的原生应用是因为它的网络技术正在赶超iOS软件的功能。虽然这是事实，但是HTML5永远也不可能与原生应用相提并论，应为苹果始终掌握着主要控制权，它可以决定哪些第三方应用软件可以在iOS设备上运行。iOS每一次重大更新都能给开发者带来新的API，而每一代新的硬件也都提供了新的网络连接选项，收音机以及其它硬件功能。举个例子来说，iOS 5便推出了1500款新型API，包括iCloud Storage，Newsstand以及Twitter。

只有苹果能够决定它的软件可以做什么或不能做什么，以及何种硬件可以与之兼容；但是因为HTML5是基于所有浏览器而设置的，所以要求更多的技术妥协。同时，HTML5如果要使用iOS硬件的所用功能也拥有许多局限因素，尽管苹果已经采取了一些改善措施，例如允许Safari使用更多的本地设备内存以及地理定位服务。虽然如此看来好像是HTML5正在迎头赶上本机应用，但是事实上它却永远不可能超越它们，因为苹果的移动技术还在不断进化，并且通过iOS SDK给原生应用开发者提供更多的API选择。

2.原生应用才刚超越移动网页

在智能手机和平板电脑设备中，手机应用刚刚才开始赶超移动网页，其人气正处于高涨阶段。应用商店的出现更是助长了这种趋势，目前尚无迹象表明这种趋势会放缓或者扭转，虽然Vudu（注：一种新型电视节目服务），亚马逊以及《金融时报》等公司最近都绕开苹果App Store，创建了HTML5网页应用。

显然，很多公司宁愿选择HTML5而不是苹果的原生应用是因为，基于网页的产品让他们绕过苹果这个中间商，避开苹果营收抽成，直接获取更大的利润，并且能够针对多个平台一次性开发产品。但是从用户体验的角度来看，绝大多数用户可能并不会支持应用大规模向HTML5领域迁移。虽然市场上将会有越来越多HTML5产品，但是原生应用的光芒也不会轻易被掩盖，因为它有稳定的离线访问，特定的界面，可自由访问特定硬件和软件等功能。

我认为在今后几年里，苹果将继续从原生应用中赚取更多利润，HTML5无法对此造成严重影响。

注：原文发表于2011年9月13日，所涉事件和数据均以当时为准。

备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。

本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器，前几天升了一下级，以后有时间再专门写一篇记录。

录音代码

本示例代码支持PC、Android、IOS(仅Safari)中使用，如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。

看万遍代码不如行动一遍，新建一个html文件，把下面三段代码复制到文件内，双击浏览器打开就能进行测试。

<!-- 先加载js录音库，注意：你应该把js clone到本地使用 --><meta charset="utf-8" />
<script src="https://xiangyuecn.github.io/Recorder/recorder.mp3.min.js"></script>
<input type="button" onclick="startRec()" value="开始录音">
<hr>
<input type="button" onclick="playRec()" value="结束并播放">
<input type="button" onclick="uploadRec()" value="结束并上传">
<script>
var rec;
function startRec(){
 rec=Recorder();//使用默认配置，mp3格式
 
 //打开麦克风授权获得相关资源
 rec.open(function(){
 //开始录音
 rec.start();
 },function(msg,isUserNotAllow){
 //用户拒绝了权限或浏览器不支持
 alert((isUserNotAllow?"用户拒绝了权限，":"")+"无法录音:"+msg);
 });
};
</script>

上传服务器代码

<script>
function uploadRec(){
 //停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 /*
 blob文件对象，可以用FileReader读取出内容
 ，或者用FormData上传，本例直接上传二进制文件
 ，对于普通application/x-www-form-urlencoded表单上传
 ，请参考github里面的例子
 */
 var form=new FormData();
 form.append("upfile",blob,"recorder.mp3"); //和普通form表单并无二致，后端接收到upfile参数的文件，文件名为recorder.mp3
 
 //直接用ajax上传
 var xhr=new XMLHttpRequest();
 xhr.open("POST","http://baidu.com/修改成你的上传地址");//这个假地址在控制台network中能看到请求数据和格式，请求结果无关紧要
 xhr.onreadystatechange=function(){
 if(xhr.readyState==4){
 alert(xhr.status==200?"上传成功":"测试请先打开浏览器控制台，然后重新录音，在network选项卡里面就能看到上传请求数据和格式了");
 }
 }
 xhr.send(form);
 },function(msg){
 alert("录音失败:"+msg);
 });
};</script>

立即播放代码

<script>
function playRec(){
 //停止录音，得到了录音文件blob二进制对象，想干嘛就干嘛
 rec.stop(function(blob,duration){
 var audio=document.createElement("audio");
 audio.controls=true;
 document.body.appendChild(audio);
 
 //非常简单的就能拿到blob音频url
 audio.src=URL.createObjectURL(blob);
 audio.play();
 },function(msg){
 alert("录音失败:"+msg);
 });
};</script>

Recorder

GitHub地址：https://github.com/xiangyuecn/Recorder

在线测试: https://xiangyuecn.github.io/Recorder/

Recorder用于html5录音，为一个纯粹的js库，支持大部分已实现getUserMedia的移动端、PC端浏览器，包括腾讯Android X5内核(QQ、微信)。

录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg、webm、amr格式；支持任意格式扩展（前提有相应编码器）。

小巧：如果对录音文件大小没有特别要求，可以仅仅使用录音核心+wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。mp3使用lamejs编码，压缩后的recorder.mp3.min.js开启gzip后54kb。

由于IOS(11.X、12.X)上只有Safari支持getUserMedia，其他浏览器均不支持H5录音，因此额外针对IOS对Recorder进行了进一步的兼容封装，升级成了RecordApp，用于支持微信（含浏览器、小程序web-view），另外RecordApp对Hybrid App也提供了更加优秀的支持。

由于RecordApp需要微信公众(订阅)号提供JsSDK录音支持，所以开发难度会大些，但支持的环境更多。Recorder拿来就能用，具体使用哪个请参考下表：

最后

如果这个库有帮助到您，请 Star 一下。

原文作者：高坚果兄弟

原文地址：https://www.cnblogs.com/xiangyuecn/p/10772227.html