HTML5网页录音和压缩

最新推荐文章于 2024-08-29 14:26:13 发布
最新推荐文章于 2024-08-29 14:26:13 发布
阅读量4.2w 收藏 18
点赞数 6
分类专栏： 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. /* data chunk identifier */
    28. writeString(view, 36, 'data');
    29. /* data chunk length */
    30. view.setUint32(40, samples.length * 2, true);
    31.  
    32. floatTo16BitPCM(view, 44, samples);
    33.  
    34. return view;
    35. }

    上面的代码,就是把字节数据格式化成wav的格式的过程

    所以我又去查了wav的头文件

    \

    要压缩,就要从上面三个红圈的地方入手

    最简单的就是把双声道改成单声道的,

    在录音的时候只需要记录一个声道就可以了

    view source print ?
    01. // 创建声音的缓存节点，createJavaScriptNode方法的
    02. // 第二个和第三个参数指的是输入和输出都是双声道。
    03. //recorder = context.createJavaScriptNode(bufferSize, 2, 2);
    04. recorder = context.createJavaScriptNode(bufferSize, 1, 1);//这里改成1
    05.  
    06. this.node.onaudioprocess = function(e){
    07. if (!recording) return;
    08. worker.postMessage({
    09. command: 'record',
    10. buffer: [
    11. e.inputBuffer.getChannelData(0)//,
    12. //e.inputBuffer.getChannelData(1)// 这里只需要保存一个
    13. ]
    14. });
    15. }
    16.  
    17. function exportWAV(type){
    18. var bufferL = mergeBuffers(recBuffersL, recLength);
    19. //var bufferR = mergeBuffers(recBuffersR, recLength);
    20. var interleaved = interleave(bufferL);//, bufferR); //合并数据的时候去到对右声道的处理
    21. var dataview = encodeWAV(interleaved);
    22. var audioBlob = new Blob([dataview], { type: type });
    23.  
    24. this.postMessage(audioBlob);
    25. }
    26.  
    27. function interleave(inputL){//, inputR){//混合声道的时候去掉对右声道的处理
    28. var length = inputL.length ;//+ inputR.length;
    29. var result = new Float32Array(length);
    30.  
    31. var index = 0,
    32. inputIndex = 0;
    33.  
    34. while (index < length){
    35. result[index++] = inputL[inputIndex];
    36. //result[index++] = inputR[inputIndex];
    37. inputIndex++;
    38. }
    39. return result;
    40. }

    然后修改一下注释,我不喜欢英文的....

    view source print ?
    01. function encodeWAV(samples) {
    02. var dataLength = samples.length * 2;
    03. var buffer = new ArrayBuffer(44 + dataLength);
    04. var view = new DataView(buffer);
    05.  
    06. var sampleRateTmp = sampleRate;
    07. var sampleBits = 16;
    08. var channelCount = 1;
    09. var offset = 0;
    10. /* 资源交换文件标识符 */
    11. writeString(view, offset, 'RIFF'); offset += 4;
    12. /* 下个地址开始到文件尾总字节数,即文件大小-8 */
    13. view.setUint32(offset, /*32这里地方栗子中的值错了,但是不知道为什么依然可以运行成功*/ 36 + dataLength, true); offset += 4;
    14. /* WAV文件标志 */
    15. writeString(view, offset, 'WAVE'); offset += 4;
    16. /* 波形格式标志 */
    17. writeString(view, offset, 'fmt '); offset += 4;
    18. /* 过滤字节,一般为 0x10 = 16 */
    19. view.setUint32(offset, 16, true); offset += 4;
    20. /* 格式类别 (PCM形式采样数据) */
    21. view.setUint16(offset, 1, true); offset += 2;
    22. /* 通道数 */
    23. view.setUint16(offset, channelCount, true); offset += 2;
    24. /* 采样率,每秒样本数,表示每个通道的播放速度 */
    25. view.setUint32(offset, sampleRateTmp, true); offset += 4;
    26. /* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
    27. view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset +=4;
    28. /* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
    29. view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
    30. /* 每样本数据位数 */
    31. view.setUint16(offset, sampleBits, true); offset += 2;
    32. /* 数据标识符 */
    33. writeString(view, offset, 'data'); offset += 4;
    34. /* 采样数据总数,即数据总大小-44 */
    35. view.setUint32(offset, dataLength, true); offset += 4;
    36. /* 采样数据 */
    37. floatTo16BitPCM(view, 44, samples);
    38.  
    39. return view;
    40. }

    一旦把双声道变为单声道,数据直接缩小一半了

    但是还不够

    继续缩小体积

    除了声道以外,还有一个可以缩减的地方就是采样位数 默认是16位的,我们改成8位 又可以减少一半了

    view source print ?
    01. function encodeWAV(samples) {
    02. var sampleBits = 8;//16;//这里改成8位
    03. var dataLength = samples.length * (sampleBits / 8);
    04. var buffer = new ArrayBuffer(44 + dataLength);
    05. var view = new DataView(buffer);
    06.  
    07. var sampleRateTmp = sampleRate;
    08.  
    09. var channelCount = 1;
    10. var offset = 0;
    11. /* 资源交换文件标识符 */
    12. writeString(view, offset, 'RIFF'); offset += 4;
    13. /* 下个地址开始到文件尾总字节数,即文件大小-8 */
    14. view.setUint32(offset, /*32这里地方栗子中的值错了,但是不知道为什么依然可以运行成功*/ 36 + dataLength, true); offset += 4;
    15. /* WAV文件标志 */
    16. writeString(view, offset, 'WAVE'); offset += 4;
    17. /* 波形格式标志 */
    18. writeString(view, offset, 'fmt '); offset += 4;
    19. /* 过滤字节,一般为 0x10 = 16 */
    20. view.setUint32(offset, 16, true); offset += 4;
    21. /* 格式类别 (PCM形式采样数据) */
    22. view.setUint16(offset, 1, true); offset += 2;
    23. /* 通道数 */
    24. view.setUint16(offset, channelCount, true); offset += 2;
    25. /* 采样率,每秒样本数,表示每个通道的播放速度 */
    26. view.setUint32(offset, sampleRateTmp, true); offset += 4;
    27. /* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
    28. view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset +=4;
    29. /* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
    30. view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
    31. /* 每样本数据位数 */
    32. view.setUint16(offset, sampleBits, true); offset += 2;
    33. /* 数据标识符 */
    34. writeString(view, offset, 'data'); offset += 4;
    35. /* 采样数据总数,即数据总大小-44 */
    36. view.setUint32(offset, dataLength, true); offset += 4;
    37. /* 采样数据 */
    38. //floatTo16BitPCM(view, 44, samples);
    39. floatTo8BitPCM(view, 44, samples);//这里改为写入8位的数据
    40. return view;
    41. }

    8和16的取值范围不一样

    \

    对比一下To8和To16的方法

    这里方法是我自己猜的,如果不对还望指出~~~

    view source print ?
    01. function floatTo16BitPCM(output, offset, input) {
    02. for (var i = 0; i < input.length; i++, offset += 2) {   //因为是int16所以占2个字节,所以偏移量是+2
    03. var s = Math.max(-1, Math.min(1, input[i]));
    04. output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
    05. }
    06. }
    07.  
    08.  
    09. function floatTo8BitPCM(output, offset, input) {
    10. for (var i = 0; i < input.length; i++, offset++) {    //这里只能加1了
    11. var s = Math.max(-1, Math.min(1, input[i]));
    12. var val = s < 0 ? s * 0x8000 : s * 0x7FFF;        
    13. val = parseInt(255 / (65535 / (val + 32768)));     //这里有一个转换的代码,这个是我个人猜测的,就是按比例转换
    14. output.setInt8(offset, val, true);
    15. }
    16. }

    怀着忐忑的心情,启动网页...居然听的到声音~居然成功了!!!

    经过这样之后又减少了一半大小

    最后就是这个采样率了

    网页中录音组件的采样率是44100 不知道在哪里改,查询了一些资料,未果...

    所以又自己猜测了,是不是我把已经缓存的时候按照比例抛弃一些就可以模拟减少采样率的操作呢?

    比如现在已经缓存的数据大小是40960 是不是我直接间隔一位抛弃一次数据,将数据大小变成20480 就可以算是采样率变成22050了呢?

    同理,要编程11025只要再抛弃一半的数据?

    所以我又做了如下修改

    view source print ?
    01. function interleave(inputL, inputR) {
    02. var compression = 44100 / 11025;    //计算压缩率
    03. var length = inputL.length / compression;
    04. var result = new Float32Array(length);
    05.  
    06. var index = 0,
    07. inputIndex = 0;
    08.  
    09. while (index < length) {
    10. result[index] = inputL[inputIndex];
    11. inputIndex += compression;//每次都跳过3个数据
    12. index++;
    13. }
    14. return result;
    15. }
    16.  
    17.  
    18. function encodeWAV(samples) {
    19. var dataLength = samples.length;
    20. var buffer = new ArrayBuffer(44 + dataLength);
    21. var view = new DataView(buffer);
    22.  
    23. var sampleRateTmp = 11025 ;//sampleRate;//写入新的采样率
    24. var sampleBits = 8;
    25. var channelCount = 1;
    26. var offset = 0;
    27. /* 资源交换文件标识符 */
    28. writeString(view, offset, 'RIFF'); offset += 4;
    29. /* 下个地址开始到文件尾总字节数,即文件大小-8 */
    30. view.setUint32(offset, /*32*/ 36 + dataLength, true); offset += 4;
    31. /* WAV文件标志 */
    32. writeString(view, offset, 'WAVE'); offset += 4;
    33. /* 波形格式标志 */
    34. writeString(view, offset, 'fmt '); offset += 4;
    35. /* 过滤字节,一般为 0x10 = 16 */
    36. view.setUint32(offset, 16, true); offset += 4;
    37. /* 格式类别 (PCM形式采样数据) */
    38. view.setUint16(offset, 1, true); offset += 2;
    39. /* 通道数 */
    40. view.setUint16(offset, channelCount, true); offset += 2;
    41. /* 采样率,每秒样本数,表示每个通道的播放速度 */
    42. view.setUint32(offset, sampleRateTmp, true); offset += 4;
    43. /* 波形数据传输率 (每秒平均字节数) 通道数×每秒数据位数×每样本数据位/8 */
    44. view.setUint32(offset, sampleRateTmp * channelCount * (sampleBits / 8), true); offset +=4;
    45. /* 快数据调整数 采样一次占用字节数 通道数×每样本的数据位数/8 */
    46. view.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
    47. /* 每样本数据位数 */
    48. view.setUint16(offset, sampleBits, true); offset += 2;
    49. /* 数据标识符 */
    50. writeString(view, offset, 'data'); offset += 4;
    51. /* 采样数据总数,即数据总大小-44 */
    52. view.setUint32(offset, dataLength, true); offset += 4;
    53. /* 采样数据 */
    54. floatTo16BitPCM(view, 44, samples);
    55.  
    56. return view;
    57. }

    再次怀着忐忑的心情,启动网页...居然听的到声音~居然又成功了

    最后把之前的代码整理封装一下

    加载中...加载中...
    view source print ?
    001. (function (window) {
    002. //兼容
    003. window.URL = window.URL || window.webkitURL;
    004. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    005.  
    006. var HZRecorder = function (stream, config) {
    007. config = config || {};
    008. config.sampleBits = config.sampleBits || 8;      //采样数位 8, 16
    009. config.sampleRate = config.sampleRate || (44100 / 6);   //采样率(1/6 44100)
    010.  
    011. var context = new webkitAudioContext();
    012. var audioInput = context.createMediaStreamSource(stream);
    013. var recorder = context.createJavaScriptNode(4096, 1, 1);
    014.  
    015. var audioData = {
    016. size: 0          //录音文件长度
    017. , buffer: []     //录音缓存
    018. , inputSampleRate: context.sampleRate    //输入采样率
    019. , inputSampleBits: 16       //输入采样数位 8, 16
    020. , outputSampleRate: config.sampleRate    //输出采样率
    021. , oututSampleBits: config.sampleBits       //输出采样数位 8, 16
    022. , input: function (data) {
    023. this.buffer.push(new Float32Array(data));
    024. this.size += data.length;
    025. }
    026. , compress: function () { //合并压缩
    027. //合并
    028. var data = new Float32Array(this.size);
    029. var offset = 0;
    030. for (var i = 0; i < this.buffer.length; i++) {
    031. data.set(this.buffer[i], offset);
    032. offset += this.buffer[i].length;
    033. }
    034. //压缩
    035. var compression = parseInt(this.inputSampleRate / this.outputSampleRate);
    036. var length = data.length / compression;
    037. var result = new Float32Array(length);
    038. var index = 0, j = 0;
    039. while (index < length) {
    040. result[index] = data[j];
    041. j += compression;
    042. index++;
    043. }
    044. return result;
    045. }
    046. , encodeWAV: function () {
    047. var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);
    048. var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);
    049. var bytes = this.compress();
    050. var dataLength = bytes.length * (sampleBits / 8);
    051. var buffer = new ArrayBuffer(44 + dataLength);
    052. var data = new DataView(buffer);
    053.  
    054. var channelCount = 1;//单声道
    055. var offset = 0;
    056.  
    057. var writeString = function (str) {
    058. for (var i = 0; i < str.length; i++) {
    059. data.setUint8(offset + i, str.charCodeAt(i));
    060. }
    061. }
    062.  
    063. // 资源交换文件标识符
    064. writeString('RIFF'); offset += 4;
    065. // 下个地址开始到文件尾总字节数,即文件大小-8
    066. data.setUint32(offset, 36 + dataLength, true); offset += 4;
    067. // WAV文件标志
    068. writeString('WAVE'); offset += 4;
    069. // 波形格式标志
    070. writeString('fmt '); offset += 4;
    071. // 过滤字节,一般为 0x10 = 16
    072. data.setUint32(offset, 16, true); offset += 4;
    073. // 格式类别 (PCM形式采样数据)
    074. data.setUint16(offset, 1, true); offset += 2;
    075. // 通道数
    076. data.setUint16(offset, channelCount, true); offset += 2;
    077. // 采样率,每秒样本数,表示每个通道的播放速度
    078. data.setUint32(offset, sampleRate, true); offset += 4;
    079. // 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8
    080. data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;
    081. // 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8
    082. data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;
    083. // 每样本数据位数
    084. data.setUint16(offset, sampleBits, true); offset += 2;
    085. // 数据标识符
    086. writeString('data'); offset += 4;
    087. // 采样数据总数,即数据总大小-44
    088. data.setUint32(offset, dataLength, true); offset += 4;
    089. // 写入采样数据
    090. if (sampleBits === 8) {
    091. for (var i = 0; i < bytes.length; i++, offset++) {
    092. var s = Math.max(-1, Math.min(1, bytes[i]));
    093. var val = s < 0 ? s * 0x8000 : s * 0x7FFF;
    094. val = parseInt(255 / (65535 / (val + 32768)));
    095. data.setInt8(offset, val, true);
    096. }
    097. } else {
    098. for (var i = 0; i < bytes.length; i++, offset += 2) {
    099. var s = Math.max(-1, Math.min(1, bytes[i]));
    100. data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
    101. }
    102. }
    103.  
    104. return new Blob([data], { type: 'audio/wav' });
    105. }
    106. };
    107.  
    108. //开始录音
    109. this.start = function () {
    110. audioInput.connect(recorder);
    111. recorder.connect(context.destination);
    112. }
    113.  
    114. //停止
    115. this.stop = function () {
    116. recorder.disconnect();
    117. }
    118.  
    119. //获取音频文件
    120. this.getBlob = function () {
    121. this.stop();
    122. return audioData.encodeWAV();
    123. }
    124.  
    125. //回放
    126. this.play = function (audio) {
    127. audio.src = window.URL.createObjectURL(this.getBlob());
    128. }
    129.  
    130. //上传
    131. this.upload = function (url, callback) {
    132. var fd = new FormData();
    133. fd.append('audioData', this.getBlob());
    134. var xhr = new XMLHttpRequest();
    135. if (callback) {
    136. xhr.upload.addEventListener('progress', function (e) {
    137. callback('uploading', e);
    138. }, false);
    139. xhr.addEventListener('load', function (e) {
    140. callback('ok', e);
    141. }, false);
    142. xhr.addEventListener('error', function (e) {
    143. callback('error', e);
    144. }, false);
    145. xhr.addEventListener('abort', function (e) {
    146. callback('cancel', e);
    147. }, false);
    148. }
    149. xhr.open('POST', url);
    150. xhr.send(fd);
    151. }
    152.  
    153. //音频采集
    154. recorder.onaudioprocess = function (e) {
    155. audioData.input(e.inputBuffer.getChannelData(0));
    156. //record(e.inputBuffer.getChannelData(0));
    157. }
    158.  
    159. };
    160. //抛出异常
    161. HZRecorder.throwError = function (message) {
    162. alert(message);
    163. throw new function () { this.toString = function () { return message; } }
    164. }
    165. //是否支持录音
    166. HZRecorder.canRecording = (navigator.getUserMedia != null);
    167. //获取录音机
    168. HZRecorder.get = function (callback, config) {
    169. if (callback) {
    170. if (navigator.getUserMedia) {
    171. navigator.getUserMedia(
    172. { audio: true } //只启用音频
    173. , function (stream) {
    174. var rec = new HZRecorder(stream, config);
    175. callback(rec);
    176. }
    177. , function (error) {
    178. switch (error.code || error.name) {
    179. case 'PERMISSION_DENIED':
    180. case 'PermissionDeniedError':
    181. HZRecorder.throwError('用户拒绝提供信息。');
    182. break;
    183. case 'NOT_SUPPORTED_ERROR':
    184. case 'NotSupportedError':
    185. HZRecorder.throwError('<a href="http://www.it165.net/edu/ewl/" target="_blank" class="keylink">浏览器</a>不支持硬件设备。');
    186. break;
    187. case 'MANDATORY_UNSATISFIED_ERROR':
    188. case 'MandatoryUnsatisfiedError':
    189. HZRecorder.throwError('无法发现指定的硬件设备。');
    190. break;
    191. default:
    192. HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));
    193. break;
    194. }
    195. });
    196. } else {
    197. HZRecorder.throwErr('当前<a href="http://www.it165.net/edu/ewl/" target="_blank" class="keylink">浏览器</a>不支持录音功能。'); return;
    198. }
    199. }
    200. }
    201.  
    202. window.HZRecorder = HZRecorder;
    203.  
    204. })(window);
    js
    view source print ?
    01. <!DOCTYPE html>
    02. <html xmlns='http://www.w3.org/1999/xhtml'>
    03. <head>
    04. <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    05. <title></title>
    06. </head>
    07. <body>
    08. <div>
    09. <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. </div>
    15.  
    16. <script type='text/javascript' src='HZRecorder.js'></script>
    17.  
    18.  
    19. <script>
    20.  
    21. var recorder;
    22.  
    23. var audio = document.querySelector('audio');
    24.  
    25. function startRecording() {
    26. HZRecorder.get(function (rec) {
    27. recorder = rec;
    28. recorder.start();
    29. });
    30. }
    31.  
    32. function stopRecording() {
    33. recorder.stop();
    34. }
    35.  
    36. function playRecording() {
    37. recorder.play(audio);
    38. }
    39.  
    40. function uploadAudio() {
    41. recorder.upload('Handler1.ashx', function (state, e) {
    42. switch (state) {
    43. case 'uploading':
    44. //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
    45. break;
    46. case 'ok':
    47. //alert(e.target.responseText);
    48. alert('上传成功');
    49. break;
    50. case 'error':
    51. alert('上传失败');
    52. break;
    53. case 'cancel':
    54. alert('上传被取消');
    55. break;
    56. }
    57. });
    58. }
    59.  
    60. </script>
    61.  
    62. </body>
    63. </html>
    好了 下班了

    源码下载: http://www.it165.net/uploadfile/files/2014/0611/RecordingDemo.rar

    demo默认采用 44100/6 的采样率 ,原来20秒要4M ,单声道砍一半 2M ,8位砍一半 1M, 6分之一采样率 1M/6 170K左右

    微信4秒只有4K是怎么做到的? 

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

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


gf771115
关注
专栏目录
html5录音兼容性,详解HTML5 录音遇到的坑
weixin_34550241的博客
06-05 669
本文恩主要介绍了详解HTML5 录音的踩坑之旅，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。说实话，一开始都没接触过 HTML5 的 Audio API，而且要基于在我们接手前的代码中进行优化。当然其中也踩了不少坑，这次也会围绕这几个坑来说说感受(会省略一些基本对象的初始化和获取，因为这些内容不是这次的重点，有兴趣的同学可以自行查找 MDN 上的文...
h5打开麦克风权限录音_HTML5网页录音和上传到服务器支持PC、Android，支持IOS微信功能...
weixin_39685762的博客
12-19 1252
准备做一个网页版聊天界面，表情啊、图片啊、上传文件啊都应该要有，视频就算了，语音还是要的。本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器。录音代码本示例代码支持PC、Android、IOS(仅Safari)中使用，如果用RecordApp可增加对IOS(微信浏览器、小程序)的支持。看万遍代码不如行动一遍，新建一个html文件，把下面三段代码复制到文件内，双击浏览器...
HTML5实时语音通话聊天，MP3压缩传输3KB每秒
高坚果兄弟
08-28 1257
自从Recorder H5 GitHub开源库优化后，对边录边转码成小语音片段文件实时上传服务器这种操作支持非常良好，因此以前不太好支持的H5语音通话已经有了更好的突破空间。因此花了两晚时间打造了一个H5语音通话聊天的demo。 欢迎在线把玩：https://xiangyuecn.github.io/Recorder/ 一、把玩方法 准备局域网内两台设备(Peer A、Peer B)用最新...
electron获取电脑/麦克风音频流，实时推送
最新发布
m0_47538449的博客
08-29 1234
总之，首先创建音频节点scriptProcessor ，将handleAudioProcess方法绑定到scriptProcessor 对象的onaudioprocess 事件上，用于处理音频操作，然后创建音频源对象source，并将其连接到scriptProcessor对象上，最后将scriptProcessor对象连接到音频上下文的输出目标。值为整数，用于指定输入 node 的声道的数量，默认值是 2，最高能取 32.值为整数，用于指定输出 node 的声道的数量，默认值是 2，最高能取 32.
HTML + JavaScript 实现网页录制音频与下载
ProgramNovice的博客
12-12 4618
HTML + JavaScript 实现网页录制音频与下载
html5 手机录音上传 源码,Html5网页JavaScript录制MP3并上传
weixin_32780623的博客
06-07 499
【实例简介】后端为 asp.net【实例截图】【核心代码】Html5网页JavaScript录制MP3音频Html5网页JavaScript录制MP3音频录制停止上传调试信息：var recorder = new MP3Recorder({debug:true,funOk: function () {btnStart.disabled = false;log('初始化成功');},funCance...
html调取android手机录音并保存,html5网页录音插件Recorder
weixin_34898216的博客
05-27 1174
插件描述：html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和Hybrid App(提供Android IOS App源码)，微信也是支持的，提供H5版语音通话聊天示例Recorder用于html5录音支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android...
h5 web录音并上传后端
03-01
在现代Web开发中，H5（HTML5）已经成为构建交互式和富媒体应用的标准。这个“H5 Web录音并上传后端”的示例着重展示了如何利用H5的新特性在浏览器内实现录音功能，并将录制的音频文件发送到服务器端。这一技术在在线...
语音录音通道压缩用于语音识别
07-17
“index.html”可能是一个简单的网页，用于展示用户界面，允许用户进行录音并触发文件上传。页面可能包含JavaScript代码，例如“HZRecorder.js”，这是一个可能用于控制录音和上传的脚本。JavaScript库如Web Audio ...
html5 record 录音实例 使用websocket
mengzhengjie的专栏
01-30 1314
http://www.jsjtt.com/webkaifa/html5/2013-08-28/34.html chrome 支持语言聊天 下面介绍一个chrome 的录音实例： Chat by Web Sockets
浏览器麦克风实时录制音频流数据，通过websocket传输
01-12
浏览器麦克风实时录制音频流数据，通过webscoket传输至后台，根据实际业务进行开发
record html
weixin_42135156的博客
05-07 607
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head runat="server"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;!-- 新 Bootstrap 核心 CSS 文件 --&gt; &lt
HTML常用标签及其全称
RecordStudy
08-25 376
http://www.cnblogs.com/debuging/archive/2011/10/19/2217337.html
js根据音频流判断是否有声音
南北极之间
04-09 4541
功能需求：首先判断有没有获取麦克风权限？然后根据音频流判断是否有声音？如果音量大于0就表示有声音。然后有一个动画。会提示话筒是有声音的状态还是没声音的状态？ 关键代码： let audioContext = new AudioContext // 将麦克风的声音输入这个对象 let mediaStreamSource = audioContext.createMediaStreamSource(stream) // 创建一个音..
跨平台HTML5网页录音插件实现与示例
资源摘要信息: "html5网页录音插件Recorder是一个基于HTML5和JavaScript技术实现的网页录音功能库，它允许用户在网页上直接录制音频，并将录制内容保存为多种音频文件格式，包括但不限于MP3, WAV, OGG, WebM以及AMR...
web网页端使用webSocket实现语音通话功能(SpringBoot+VUE)
Carmelo_7的博客
12-22 8227
借助webSocket全双工通信的方式来实现web客户端之间的语音通话，解决网上能找到的一个代码使用之后只能听到“嘀嘀嘀”杂音的问题
web如何实现录制音频，满满干货（下篇）
qq_44859233的博客
12-12 1248
好了，这就是录制+播放+下载+上传音频的正确方式，其实上面这些功能，就是第三方库js-audio-recorder的全部源码了。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值