HTML5网页录音和压缩

               

转自：http://www.it165.net/design/html/201406/2651.html

• 宣传一下自己的qq群:5946699 (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步

  群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以一起交流,共同进步

  最近公司需要用到web录音的功能

  本人接手了这个任务

  在网上找了一些资料

  http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html

  http://javascript.ruanyifeng.com/bom/webrtc.html

  讲的都差不多

  也就是怎么使用 getUserMedia

  下载来的栗子也比较简单,可以直接运行

  问题1:怎么上传

  栗子中最后返回的是Blob数据

  view source print ?

  1. return new Blob([dataview], { type: type })

  因为对html5不熟,所以又查了一些数据

  原来HTML5中使用FormData这个对象好方便

  view source print ?

  1. var fd = new FormData();

  2. fd.append('audioData', blob);

  3. var xhr = new XMLHttpRequest();

  4. xhr.open('POST', url);

  5. xhr.send(fd);

  在C#服务器端 如下代码就可以接收了

  view source print ?

  1. public void ProcessRequest(HttpContext context)

  2. {

  3. if (context.Request.Files.Count > 0)

  4. {

  5. context.Request.Files[0].SaveAs('d:\1.wav');

  6. }

  7. }

  问题2:文件体积太大

  是的,使用上面的栗子,直接录音保存后基本上2秒就需要400K,一段20秒的录音就达到了的4M

  这样的数据根本无法使用,必须想办法压缩数据

  我开始尝试读每一段代码

  view source print ?

  01. function encodeWAV(samples){

  02. var buffer = new ArrayBuffer(44 + samples.length * 2);

  03. var view = new DataView(buffer);

  04.  

  05. /* RIFF identifier */

  06. writeString(view, 0, 'RIFF');

  07. /* file length */

  08. view.setUint32(4, 32 + samples.length * 2, true);

  09. /* RIFF type */

  10. writeString(view, 8, 'WAVE');

  11. /* format chunk identifier */

  12. writeString(view, 12, 'fmt ');

  13. /* format chunk length */

  14. view.setUint32(16, 16, true);

  15. /* sample format (raw) */

  16. view.setUint16(20, 1, true);

  17. /* channel count */

  18. view.setUint16(22, 2, true);

  19. /* sample rate */

  20. view.setUint32(24, sampleRate, true);

  21. /* byte rate (sample rate * block align) */

  22. view.setUint32(28, sampleRate * 4, true);

  23. /* block align (channel count * bytes per sample) */

  24. view.setUint16(32, 4, true);

  25. /* bits per sample */

  26. view.setUint16(34, 16, true);

  27.