企业网站托管服务公司,网站建设中的功能,佛山专业做淘宝网站,茂名市网站建设最近的项目又需要用到录音#xff0c;年前有过调研#xff0c;再次翻出来使用#xff0c;这里做一个记录。 HTML5提供了录音支持#xff0c;因此可以方便使用HTML5来录音#xff0c;来实现录音、语音识别等功能#xff0c;语音开发必备。但是ES标准提供的API并不人性化年前有过调研再次翻出来使用这里做一个记录。 HTML5提供了录音支持因此可以方便使用HTML5来录音来实现录音、语音识别等功能语音开发必备。但是ES标准提供的API并不人性化不方便使用并且不提供保存为wav的功能开发起来费劲啊 github寻找轮子发现Recorder.js基本上可以满足需求了良好的封装支持导出wav但是存在 wav采样率不可调整recorder创建麻烦需要自己初始化getUserMedia无实时数据回调不方便绘制波形。。。改造轮子 创建recorder工具方法 提供创建recorder工具函数封装audio接口 static createRecorder(callback,config){window.AudioContext window.AudioContext || window.webkitAudioContext;window.URL window.URL || window.webkitURL;navigator.getUserMedia navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;if (navigator.getUserMedia) {navigator.getUserMedia({ audio: true } //只启用音频, function (stream) {var audio_context new AudioContext;var input audio_context.createMediaStreamSource(stream);var rec new Recorder(input, config);callback(rec);}, function (error) {switch (error.code || error.name) {case PERMISSION_DENIED:case PermissionDeniedError:throwError(用户拒绝提供信息。);break;case NOT_SUPPORTED_ERROR:case NotSupportedError:throwError(浏览器不支持硬件设备。);break;case MANDATORY_UNSATISFIED_ERROR:case MandatoryUnsatisfiedError:throwError(无法发现指定的硬件设备。);break;default:throwError(无法打开麦克风。异常信息: (error.code || error.name));break;}});} else {throwError(当前浏览器不支持录音功能。); return;}} 采样率 H5录制的默认是44k的文件大不方便传输因此需要进行重新采样一般采用插值取点方法 以下代码主要来自stackoverflow /*** 转换采样率* param data* param newSampleRate 目标采样率* param oldSampleRate 原始数据采样率* returns {any[]|Array}*/function interpolateArray(data, newSampleRate, oldSampleRate) {var fitCount Math.round(data.length * (newSampleRate / oldSampleRate));var newData new Array();var springFactor new Number((data.length - 1) / (fitCount - 1));newData[0] data[0]; // for new allocationfor (var i 1; i fitCount - 1; i) {var tmp i * springFactor;var before new Number(Math.floor(tmp)).toFixed();var after new Number(Math.ceil(tmp)).toFixed();var atPoint tmp - before;newData[i] this.linearInterpolate(data[before], data[after], atPoint);}newData[fitCount - 1] data[data.length - 1]; // for new allocationreturn newData;}function linearInterpolate(before, after, atPoint) {return before (after - before) * atPoint;} 修改导出wav函数exportWAV增加采样率选项 /*** 导出wav* param type* param desiredSamplingRate 期望的采样率*/function exportWAV(type,desiredSamplingRate) {// 默认为16kdesiredSamplingRate desiredSamplingRate || 16000;var buffers [];for (var channel 0; channel numChannels; channel) {var buffer mergeBuffers(recBuffers[channel], recLength);// 需要转换采样率if (desiredSamplingRate!sampleRate) {// 插值去点buffer interpolateArray(buffer, desiredSamplingRate, sampleRate);}buffers.push(buffer);}var interleaved numChannels 2 ? interleave(buffers[0], buffers[1]) : buffers[0];var dataview encodeWAV(interleaved,desiredSamplingRate);var audioBlob new Blob([dataview], { type: type });self.postMessage({ command: exportWAV, data: audioBlob });} 实时录音数据回调 为了方便绘制音量、波形图需要获取到实时数据 config新增一个回调函数onaudioprocess config {bufferLen: 4096,numChannels: 1, // 默认单声道mimeType: audio/wav,onaudioprocess:null}; 修改录音数据处理函数 this.node.onaudioprocess (e) {if (!this.recording) return;var buffer [];for (var channel 0; channel this.config.numChannels; channel) {buffer.push(e.inputBuffer.getChannelData(channel));}// 发送给workerthis.worker.postMessage({command: record,buffer: buffer});// 数据回调if(this.config.onaudioprocess){this.config.onaudioprocess(buffer[0]);}}; 这样在创建recorder时配置onaudioprocess就可以获取到实时数据了 实时数据编码 编码计算耗时需要放到worker执行 接口函数新增encode发送消息给worker让worker执行 encode(cb,buffer,sampleRate) {cb cb || this.config.callback;if (!cb) throw new Error(Callback not set);this.callbacks.encode.push(cb);this.worker.postMessage({ command: encode,buffer:buffer,sampleRate:sampleRate});} worker里新增encode函数处理encode请求完成后执行回调 self.onmessage function (e) {switch (e.data.command) {case encode:encode(e.data.buffer,e.data.sampleRate);break;}};encode(cb,buffer,sampleRate) {cb cb || this.config.callback;if (!cb) throw new Error(Callback not set);this.callbacks.encode.push(cb);this.worker.postMessage({ command: encode,buffer:buffer,sampleRate:sampleRate});} wav上传 增加一个上传函数 exportWAVAndUpload(url, callback) {var _url url;exportWAV(function(blob){var fd new FormData();fd.append(audioData, blob);var xhr new XMLHttpRequest();if (callback) {xhr.upload.addEventListener(progress, function (e) {callback(uploading, e);}, false);xhr.addEventListener(load, function (e) {callback(ok, e);}, false);xhr.addEventListener(error, function (e) {callback(error, e);}, false);xhr.addEventListener(abort, function (e) {callback(cancel, e);}, false);}xhr.open(POST, url);xhr.send(fd);}) } 完整代码 点击下载 发现新轮子 今天再次看这个项目发现这个项目已经不维护了 Note: This repository is not being actively maintained due to lack of time and interest. If you maintain or know of a good fork, please let me know so I can direct future visitors to it. In the meantime, if this library isnt working, you can find a list of popular forks here: http://forked.yannick.io/mattdiamond/recorderjs. 作者推荐https://github.com/chris-rudmin/Recorderjs提供更多的功能 bitRate (optional) Specifies the target bitrate in bits/sec. The encoder selects an application-specific default when this is not specified.bufferLength - (optional) The length of the buffer that the internal JavaScriptNode uses to capture the audio. Can be tweaked if experiencing performance issues. Defaults to 4096.encoderApplication - (optional) Specifies the encoder application. Supported values are 2048 - Voice, 2049 - Full Band Audio, 2051 - Restricted Low Delay. Defaults to 2049.encoderComplexity - (optional) Value between 0 and 10 which determines latency and processing for resampling. 0 is fastest with lowest complexity. 10 is slowest with highest complexity. The encoder selects a default when this is not specified.encoderFrameSize (optional) Specifies the frame size in ms used for encoding. Defaults to 20.encoderPath - (optional) Path to encoderWorker.min.js worker script. Defaults to encoderWorker.min.jsencoderSampleRate - (optional) Specifies the sample rate to encode at. Defaults to 48000. Supported values are 8000, 12000, 16000, 24000 or 48000.leaveStreamOpen - (optional) Keep the stream around when trying to stop recording, so you can re-start without re-initStream. Defaults to false.maxBuffersPerPage - (optional) Specifies the maximum number of buffers to use before generating an Ogg page. This can be used to lower the streaming latency. The lower the value the more overhead the ogg stream will incur. Defaults to 40.monitorGain - (optional) Sets the gain of the monitoring output. Gain is an a-weighted value between 0 and 1. Defaults to 0numberOfChannels - (optional) The number of channels to record. 1 mono, 2 stereo. Defaults to 1. Maximum 2 channels are supported.originalSampleRateOverride - (optional) Override the ogg opus input sample rate field. Google Speech API requires this field to be 16000.resampleQuality - (optional) Value between 0 and 10 which determines latency and processing for resampling. 0 is fastest with lowest quality. 10 is slowest with highest quality. Defaults to 3.streamPages - (optional) dataAvailable event will fire after each encoded page. Defaults to false.推荐使用 作者Jadepeng 出处jqpeng的技术记事本--http://www.cnblogs.com/xiaoqi 您的支持是对博主最大的鼓励感谢您的认真阅读。 本文版权归作者所有欢迎转载但未经作者同意必须保留此段声明且在文章页面明显位置给出原文连接否则保留追究法律责任的权利。 转载于:https://www.cnblogs.com/xiaoqi/p/6993912.html
