使用 html5 在网页录音和保存

2018年04月25日 15:09 · 阅读(2174) ·

[目录]

本文引用自

这篇的内容都不是我写的，我只是把例子自己用 MVC3 做了一遍，主要是下面这位大神实现的

HTML5网页录音和压缩,边猜边做..(附源码)

源码 Demo

见附件

HZRecorder.js

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

HTML

  1. @{
  2.     Layout = null;
  3. }
  4. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <title>HZRecorder</title>
  9. </head>
  10. <body>
  11.     <div>
  12.         <audio controls autoplay></audio>
  13.         <input onclick="startRecording()" type="button" value="录音" />
  14.         <input onclick="stopRecording()" type="button" value="停止" />
  15.         <input onclick="playRecording()" type="button" value="播放" />
  16.         <input onclick="uploadAudio()" type="button" value="提交" />
  17.     </div>
  19.     <script type="text/javascript" src="@Url.Content("~/HZRecorder/HZRecorder.js")"></script>
  20.     <script>
  22.         var recorder;
  24.         var audio = document.querySelector('audio');
  26.         function startRecording() {
  27.             HZRecorder.get(function (rec) {
  28.                 recorder = rec;
  29.                 recorder.start();
  30.             });
  31.         }
  33.         function stopRecording() {
  34.             recorder.stop();
  35.         }
  37.         function playRecording() {
  38.             recorder.play(audio);
  39.         }
  41.         function uploadAudio() {
  42.             recorder.upload("@Url.Action("SaveFile","Default")", function (state, e) {
  43.                 switch (state) {
  44.                     case 'uploading':
  45.                         //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
  46.                         break;
  47.                     case 'ok':
  48.                     debugger
  49.                         //alert(e.target.responseText);
  50.                         alert("上传成功");
  51.                         alert(e.target.responseText.AudioSrc);
  52.                         break;
  53.                     case 'error':
  54.                         alert("上传失败");
  55.                         break;
  56.                     case 'cancel':
  57.                         alert("上传被取消");
  58.                         break;
  59.                 }
  60.             });
  61.         }
  63.     </script>
  64. </body>
  65. </html>

Controller

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  7. namespace RecordDemo.Controllers
  8. {
  9.     public class DefaultController : Controller
  10.     {
  11.         public ActionResult Index()
  12.         {
  13.             return View();
  14.         }
  16.         public ActionResult HZRecorder()
  17.         {
  18.             return View();
  19.         }
  22.         [HttpPost]
  23.         public JsonResult SaveFile(HttpPostedFileBase f)
  24.         {
  25.             var files = Request.Files;
  26.             if (files.Count == 0)
  27.                 return Json(new { Success = false, Message = "提示：没有要上传的文件！" }, JsonRequestBehavior.AllowGet);
  29.             string savePath = "/Content/Audio/";
  30.             string audioUrl = "http://" + Request.Url.Authority + savePath;
  31.             foreach (string file in files)
  32.             {
  33.                 //获取文件信息  
  34.                 var curFile = Request.Files[file];
  36.                 string fileName = "1.wav";
  38.                 //保存文件到服务器磁盘
  39.                 curFile.SaveAs(Server.MapPath("~" + savePath) + fileName);
  41.                 audioUrl += fileName;
  42.             }
  44.             return Json(new { Success = true, AudioSrc = audioUrl }, JsonRequestBehavior.AllowGet);
  45.         }
  46.     }
  47. }
相关附件 RecordDemo-2018.4.25 | 大小:0.03M | 下载