一、浏览器HTML5录音功能

二、业务代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div>
  9.         <audio controls autoplay></audio>
  10.         <input onclick="startRecording()" type="button" value="录音" />
  11.         <input onclick="stopRecording()" type="button" value="停止" />
  12.         <input onclick="playRecording()" type="button" value="播放" />
  13.         <input onclick="uploadAudio()" type="button" value="提交" />
  14.         <input onclick="cancelAudio()" type="button" value="取消" />
  15.     </div>
  17.     <script type="text/javascript" src="record.js"></script>
  19.     <script>
  21.         var recorder;
  23.         var audio = document.querySelector('audio');
  25.         function startRecording() {
  26.             HZRecorder.get(function (rec) {
  27.                 recorder = rec;
  28.                 recorder.start();
  29.             });
  30.         }
  32.         function stopRecording() {
  33.             recorder.stop();
  34.         }
  36.         function playRecording() {
  37.             recorder.play(audio);
  38.         }
  40.         function cancelAudio(){
  41.             recorder.stop();
  42.             recorder.clear();
  43.         }
  45.         function uploadAudio() {
  46.             recorder.upload("/upload", function (state, e) {
  47.                 switch (state) {
  48.                     case 'uploading':
  49.                         //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
  50.                         break;
  51.                     case 'ok':
  52.                         //alert(e.target.responseText);
  53.                         alert("上传成功");
  54.                         break;
  55.                     case 'error':
  56.                         alert("上传失败");
  57.                         break;
  58.                     case 'cancel':
  59.                         alert("上传被取消");
  60.                         break;
  61.                 }
  62.             });
  63.         }
  65.     </script>
  67. </body>
  68. </html>

三、录音文件


  2. //兼容
  3. window.URL = window.URL || window.webkitURL;
  4. //获取计算机的设备：摄像头或者录音设备
  5. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  7. var HZRecorder = function (stream, config) {
  8.     config = config || {};
  9.     config.sampleBits = config.sampleBits || 8;      //采样数位 8, 16
  10.     config.sampleRate = config.sampleRate || (44100 / 6);   //采样率(1/6 44100)
  12.     //创建一个音频环境对象
  13.     var audioContext = window.AudioContext || window.webkitAudioContext;
  14.     var context = new audioContext();
  15.     var audioInput = context.createMediaStreamSource(stream);
  16.     // 第二个和第三个参数指的是输入和输出都是单声道,2是双声道。
  17.     var recorder = context.createScriptProcessor(4096, 1, 1);
  19.     var audioData = {
  20.         size: 0          //录音文件长度
  21.         , buffer: []     //录音缓存
  22.         , inputSampleRate: context.sampleRate    //输入采样率
  23.         , inputSampleBits: 16       //输入采样数位 8, 16
  24.         , outputSampleRate: config.sampleRate    //输出采样率
  25.         , outputSampleBits: config.sampleBits       //输出采样数位 8, 16
  26.         , input: function (data) {
  27.             this.buffer.push(new Float32Array(data));
  28.             this.size += data.length;
  29.         }
  30.         , compress: function () { //合并压缩
  31.             //合并
  32.             var data = new Float32Array(this.size);
  33.             var offset = 0;
  34.             for (var i = 0; i < this.buffer.length; i++) {
  35.                 data.set(this.buffer[i], offset);
  36.                 offset += this.buffer[i].length;
  37.             }
  38.             //压缩
  39.             var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
  40.             var length = data.length / compression;
  41.             var result = new Float32Array(length);
  42.             var index = 0, j = 0;
  43.             while (index < length) {
  44.                 result[index] = data[j];
  45.                 j += compression;
  46.                 index++;
  47.             }
  48.             return result;
  49.         }
  50.         , encodeWAV: function () {
  51.             var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
  52.             var sampleBits = Math.min(this.inputSampleBits, this.outputSampleBits);
  53.             var bytes = this.compress();
  54.             var dataLength = bytes.length * (sampleBits / 8);
  55.             var buffer = new ArrayBuffer(44 + dataLength);
  56.             var data = new DataView(buffer);
  58.             var channelCount = 1;//单声道
  59.             var offset = 0;
  61.             var writeString = function (str) {
  62.                 for (var i = 0; i < str.length; i++) {
  63.                     data.setUint8(offset + i, str.charCodeAt(i));
  64.                 }
  65.             }
  67.             // 资源交换文件标识符
  68.             writeString('RIFF'); offset += 4;
  69.             // 下个地址开始到文件尾总字节数,即文件大小-8
  70.             data.setUint32(offset, 36 + dataLength, true); offset += 4;
  71.             // WAV文件标志
  72.             writeString('WAVE'); offset += 4;
  73.             // 波形格式标志
  74.             writeString('fmt '); offset += 4;
  75.             // 过滤字节,一般为 0x10 = 16
  76.             data.setUint32(offset, 16, true); offset += 4;
  77.             // 格式类别 (PCM形式采样数据)
  78.             data.setUint16(offset, 1, true); offset += 2;
  79.             // 通道数
  80.             data.setUint16(offset, channelCount, true); offset += 2;
  81.             // 采样率,每秒样本数,表示每个通道的播放速度
  82.             data.setUint32(offset, sampleRate, true); offset += 4;
  83.             // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
  84.             data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;
  85.             // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
  86.             data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
  87.             // 每样本数据位数
  88.             data.setUint16(offset, sampleBits, true); offset += 2;
  89.             // 数据标识符
  90.             writeString('data'); offset += 4;
  91.             // 采样数据总数,即数据总大小-44
  92.             data.setUint32(offset, dataLength, true); offset += 4;
  93.             // 写入采样数据
  94.             if (sampleBits === 8) {
  95.                 for (var i = 0; i < bytes.length; i++, offset++) {
  96.                     var s = Math.max(-1, Math.min(1, bytes[i]));
  97.                     var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
  98.                     val = parseInt(255 / (65535 / (val + 32768)));
  99.                     data.setInt8(offset, val, true);
  100.                 }
  101.             } else {
  102.                 for (var i = 0; i < bytes.length; i++, offset += 2) {
  103.                     var s = Math.max(-1, Math.min(1, bytes[i]));
  104.                     data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  105.                 }
  106.             }
  108.             return new Blob([data], { type: 'audio/mp3' });
  109.         }
  110.     };
  112.     //开始录音
  113.     this.start = function () {
  114.         audioInput.connect(recorder);
  115.         recorder.connect(context.destination);
  116.     }
  118.     //停止
  119.     this.stop = function () {
  120.         recorder.disconnect();
  121.     }
  123.     //获取音频文件
  124.     this.getBlob = function () {
  125.         this.stop();
  126.         return audioData.encodeWAV();
  127.     }
  129.     //回放
  130.     this.play = function (audio) {
  131.         audio.src = window.URL.createObjectURL(this.getBlob());
  132.     }
  133.     //清除
  134.     this.clear = function(){
  135.         audioData.buffer=[];
  136.         audioData.size=0;
  137.     }
  139.     //上传
  140.     this.upload = function (url, callback) {
  141.         var fd = new FormData();
  142.         fd.append("audioData", this.getBlob());
  143.         var xhr = new XMLHttpRequest();
  144.         if (callback) {
  145.             xhr.upload.addEventListener("progress", function (e) {
  146.                 callback('uploading', e);
  147.             }, false);
  148.             xhr.addEventListener("load", function (e) {
  149.                 callback('ok', e);
  150.             }, false);
  151.             xhr.addEventListener("error", function (e) {
  152.                 callback('error', e);
  153.             }, false);
  154.             xhr.addEventListener("abort", function (e) {
  155.                 callback('cancel', e);
  156.             }, false);
  157.         }
  158.         xhr.open("POST", url);
  159.         xhr.send(fd);
  160.     }
  162.     //音频采集
  163.     recorder.onaudioprocess = function (e) {
  164.         audioData.input(e.inputBuffer.getChannelData(0));
  165.         //record(e.inputBuffer.getChannelData(0));
  166.     }
  168. };
  169. //抛出异常
  170. HZRecorder.throwError = function (message) {
  171.     alert(message);
  172.     throw new function () { this.toString = function () { return message; } }
  173. }
  174. //是否支持录音
  175. HZRecorder.canRecording = (navigator.getUserMedia != null);
  176. //获取录音机
  177. HZRecorder.get = function (callback, config) {
  178.     if (callback) {
  179.         if (navigator.getUserMedia) {
  180.             navigator.getUserMedia(
  181.                 { audio: true } //只启用音频
  182.                 , function (stream) {
  183.                     var rec = new HZRecorder(stream, config);
  184.                     callback(rec);
  185.                 }
  186.                 , function (error) {
  187.                     switch (error.code || error.name) {
  188.                         case 'PERMISSION_DENIED':
  189.                         case 'PermissionDeniedError':
  190.                             HZRecorder.throwError('用户拒绝提供信息。');
  191.                             break;
  192.                         case 'NOT_SUPPORTED_ERROR':
  193.                         case 'NotSupportedError':
  194.                             HZRecorder.throwError('浏览器不支持硬件设备。');
  195.                             break;
  196.                         case 'MANDATORY_UNSATISFIED_ERROR':
  197.                         case 'MandatoryUnsatisfiedError':
  198.                             HZRecorder.throwError('无法发现指定的硬件设备。');
  199.                             break;
  200.                         default:
  201.                             HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
  202.                             break;
  203.                     }
  204.                 });
  205.         } else {
  206.             HZRecorder.throwErr('当前浏览器不支持录音功能。'); return;
  207.         }
  208.     }
  209. };

参考地址

https://github.com/silenceboy...

浏览器HTML5录音功能的更多相关文章

  1. 浏览器HTML5支持程度测试

    /********************************************************************* * 浏览器HTML5支持程度测试 * 说明: * 想知道对 ...

  2. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼

    2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼   转眼又已过去了一年,在这一年里,Firefox 和 Chrome 在拼升级,版本号不断飙升:IE10 随着 Windows 8 在 ...

  3. 2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼【转】

    摘要: 这篇文章给大家带来<五大主流浏览器 HTML5 和 CSS3 兼容性大比拼>,让我们一起来看看2013年的浏览器现状.浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 ...

  4. 主流浏览器HTML5视频格式差异

    因最近在研究video.js,现在遇到的问题是在js中设置了swf,但是在ie8下只是显示黑屏并没有播放视频,在网上进行搜索时查到了有关各个浏览器支持哪些视频格式的文章,现在此记录下,方便以后查阅. ...

  5. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  6. 内地视频网站对各种浏览器HTML5的支持情况

    实在闲得蛋疼 2017/10/1

  7. Chrome浏览器 HTML5看视频卡顿

    定位问题 起初以为是flash的问题,但是在B站看视频,由html播放改为flash播放后,卡顿现象消失 将相同的B站视频,用edge播放,也无卡顿现象 可以确定,问题出在chrome身上 解决方法 ...

  8. 兼容各个浏览器的H.264播放： H.264+HTML5+FLOWPLAYER+WOWZA+RMTP

    一.方案确定 计划做视频播放,要求可以播放H264编码的mp4文件,各个浏览器,各种终端都能播放. 首先查找可行性方案, http://www.cnblogs.com/sink_cup/archive ...

  9. html5手机浏览器启动微信客户端支付实例

    html5手机浏览器启动微信客户端支付实例,外部浏览器html5微信支付技术,如何在手机浏览器微信支付,在微信客户端外的移动端网页使用微信支付 首先在微信支付官网https://pay.weixin. ...

随机推荐

  1. 利用pcl数据结构，实现RegionGrowing的复现

    这篇博客是pcl中区域增长的算法进行简介以实现重写,并添加了一些判断条件. 起初原因是在使用pcl封装的regionGrowing时,效果不太好. 于是想自己重新写一下,通过改变其中种子点的生成策略和 ...

  2. ubuntu18下lamp虚拟路劲配置

    一.配置二级域名 修改hosts文件,模拟dns解析. 位置:/etc/hosts 添加 127.0.0.1  myweb.service.com 二.创建项目目录 apache默认目录是/var m ...

  3. input搜索框实时检索功能实现（超简单，核心原理请看思路即可）

    问题:实现input搜索框实时检索的功能,类似哔哩哔哩首页搜索功能(壮哉我大b站!).公司要求,emmmm没办法,果然懒人是要被赶着走才会进步的说,诶嘿O(∩_∩)O. 解决方法: 1.参考资料:ht ...

  4. ES使用text类型字段排序报错

    elasticsearch text字段排序报错解决使用elasticsearch 进行排序的时候,我们一般都会排序数字.日期.但是在排序text类型的时候就会出现错误. GET xytest/sut ...

  5. java 正则表达式 复习

    正则表达式在日常开发中会经常的接触到,学会了正则可以更有效的对字符进行验证.拆分.替换.判断字符串是否合法等操作... 常用语法: 字符的取值范围 1.[abc] : 表示可能是a,可能是b,也可能是 ...

  6. httpClient4.5.2工具类总结

    使用背景: 因项目使用非结构化存储,http相关jar包统一升级到httpClient4.5.2,查阅相关文档总结如下,以咨分享,望不吝指教. 依赖jar包 httpclient-4.5.2.jar. ...

  7. vue点击出现蒙版

      需求: 1.点击一个事件时弹出一个蒙版: 2.蒙版上有取消,删除事件:(点击取消时候蒙版消失,点击删除时,删除蒙版并消失): 3.点击空白地方,蒙版也消失:   <template> ...

  8. php打开csv

    <?php $fh=fopen("a.csv","r");//这里我们只是读取数据,所以采用只读打开文件流 $arr=fgetcsv($fh);//这个函 ...

  9. python 四舍五入进位不准

    python中四舍五入进位不准,自己写了个方法结果: def new_round(_float, _len): ''' 四舍五入保留小数位,如果想实现 0.2 显示为 0.20,可使用 '%.2f' ...

  10. Celery多队列配置

    Celery多队列配置 Celery官方文档 项目结构 /proj -__init__ -app.py #实例化celery对象 -celeryconfig.py #celery的配置文件 -task ...