Recorder.js HTML5+JS实现网页录音

最近项目有个需求，想要通过网页形式实现录音功能，经过多方查阅资料。总结可得，目前IOS系统不支持此功能，一部分浏览器和安卓支持。我们在网页端实现播放音频/视频现在已经没那么难了，但是有的奇怪需求，比如想要你实现在网页上录音/录视频/拍照，这些就没那么轻而易举了。

1. 经过查阅得知，以前进行媒体音视频得录制，通常是使用Flash和Sliverlight等等进行的。如果想进行网页录音/录视频，MDN提供了API——MediaRecorder() ；还有一个API——navigator.getUserMedia()；html5中提供了API——getUserMedia()能够调用电脑的摄像头，结合 <video> 标签和 Canvas 就能在浏览器中拍摄照片了。

2. 运行过程中我们应该注意：

因为安全问题, chrome 对于本地文件禁用了很多功能(以file:///开头). 所以如果你直接把html文件拖进chrome是看不到效果的 (getUserMedia 失败)——亲测确实是这样的！

3. 如何解决：

使用IDE webstrom采用localhost形式运行，而不用sublime以被内地file://形式运行（亲测无效）
配合http服务器，如apache等
关闭所有chrome窗口（否则参数无效），在命令行中增加如下参数启动 chrome： chrome --allow-file-access-from-files

4. recorder.js

recorder.js基于HTML5的录音功能，输出格式为mp3文件。

它完全依赖H5原生API，其所涉及的API：WebRTC、AudioContext、Worker、Video/Audio API、Blob、URL

目前来说兼容Chrome、FF、Edge、QQ、360(注：目前IE和Safari全版本不兼容)，其中Chrome47以上以及QQ浏览器强制要求HTTPS的支持，请尝试使用FF、Edge、360等浏览器进行体验，或将项目下载到本地通过localhost的方式

使用方式有：

var recorder = new Recorder({sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)bitRate: 128, //比特率，默认为128kbps(标准MP3质量)success: function(){ //成功回调函数},error: function(msg){ //失败回调函数},fix: function(msg){ //不支持H5录音回调函数}
});

API有：

//开始录音
recorder.start();
//停止录音
recorder.stop();
//获取MP3编码的Blob格式音频文件
recorder.getBlob(function(blob){ //获取成功回调函数，blob即为音频文件
//  ...
},function(msg){ //获取失败回调函数，msg为错误信息
//  ...
});

Recorder.js HTML5+JS实现网页录音相关推荐

免费html5 css3大学生网页设计期末作业网页制作作业成品
html5 css3大学生网页设计期末作业网页制作作业成品布局技术:html5 css3 页面个数:6个网页元素:图文超链接表单效果图: 目录如下: <!DOCTYPE html&g ...
h5调用android录音,html5网页录音插件Recorder
插件描述:html5 js 录音 mp3 wav ogg webm amr 格式,支持pc和Android.ios部分浏览器.和Hybrid App(提供Android IOS App源码),微信也是 ...
html5+js 进行录音，
最近在写一个纯html5+js的移动端app,客户提出即时通讯功能还要发送语音,整整花费了一个星期的时间,终于能在android上边进行录音,废话不多说了,上代码........ 录音的代码使用的HZ ...
js HTML5 网页版植物大战僵尸游戏
js HTML5 网页版植物大战僵尸游戏源于:http://www.huiyi8.com/moban/ 植物大战僵尸Javascript版 HTML5模版 body{-moz-user-select ...
HTML5光晕线条网页背景动画js特效
下载地址 HTML5光晕线条网页背景动画特效,基于Canvas实现适合作为动态网页背景. dd:
HTML5网页录音和上传到服务器，支持PC、Android，支持IOS微信
准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...
html5网页录音和语音识别
背景在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本.语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别).接 ...
html测试大题代码,Html5+js测试题(示例代码)
Html5+js测试题 ============================================== 1.谈谈你对js闭包的理解: 闭包是一个比较抽象的概念,尤其是对js新手来说.书上 ...
html5.js让IE（包括IE6）支持HTML5元素方法
html5.js让IE(包括IE6)支持HTML5元素方法微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的 ...
html5动画测试题,Html5+js测试题
Html5+js测试题 ============================================== 1.谈谈你对js闭包的理解: 闭包是一个比较抽象的概念,尤其是对js新手来说.书上 ...

Recorder.js HTML5+JS实现网页录音

Recorder.js HTML5+JS实现网页录音相关推荐

最新文章

热门文章