JavaScript调用麦克风并录制wav音频

相信很多人遇到使用JavaScript调用麦克风录音，这里给出实现代码，大家可以在其基础上按特殊需求进行修改。

<div><audio controls autoplay></audio><input onclick="startRecording()" type="button" value="录音"/><input onclick="stopRecording()" type="button" value="停止"/><input onclick="playRecording()" type="button" value="播放"/><input onclick="uploadAudio()" type="button" value="提交"/>
</div>
<script>var recorder;var audio = document.querySelector('audio');function startRecording() {HZRecorder.get(function (rec) {recorder = rec;recorder.start();});}function stopRecording() {recorder.stop();}function playRecording() {recorder.play(audio);}function uploadAudio() {recorder.upload()}
</script>

(function (window) {//兼容window.URL = window.URL || window.webkitURL;navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;try {var audioContext = new window.AudioContext();} catch (e) {console.log('!Your browser does not support AudioContext');}var context = context || new AudioContext();var HZRecorder = function (stream, config) {config = config || {};config.sampleBits = config.sampleBits || 16;      //采样数位 8, 16config.sampleRate = config.sampleRate || 16000;   //采样率(1/6 44100)var audioInput = context.createMediaStreamSource(stream);var recorder = context.createScriptProcessor ? context.createScriptProcessor(4096, 1, 1) : context.createJavaScriptNode(4096, 1, 1);var audioData = {size: 0          //录音文件长度, buffer: []   //录音缓存, bufferData: [], inputSampleRate: context.sampleRate    //输入采样率, inputSampleBits: 16       //输入采样数位 8, 16, outputSampleRate: config.sampleRate    //输出采样率, oututSampleBits: config.sampleBits       //输出采样数位 8, 16, input: function (data) {this.buffer.push(new Float32Array(data));for (var i = 0; i < data.length; i++) {this.bufferData.push(data[i]);}// initEchart(this.buffer);this.size += data.length;}, compress: function () { //合并压缩//合并var data = new Float32Array(this.size);var offset = 0;for (var i = 0; i < this.buffer.length; i++) {data.set(this.buffer[i], offset);offset += this.buffer[i].length;}//压缩var compression = parseInt(this.inputSampleRate / this.outputSampleRate);var length = data.length / compression;var result = new Float32Array(parseInt(length));// var result = new Float32Array(length);var index = 0, j = 0;while (index < length) {result[index] = data[j];j += compression;index++;}return result;}, encodeWAV: function () {var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);var bytes = this.compress();var dataLength = bytes.length * (sampleBits / 8);var buffer = new ArrayBuffer(44 + dataLength);var data = new DataView(buffer);var channelCount = 1;//单声道var offset = 0;var writeString = function (str) {for (var i = 0; i < str.length; i++) {data.setUint8(offset + i, str.charCodeAt(i));}}// 资源交换文件标识符writeString('RIFF');offset += 4;// 下个地址开始到文件尾总字节数,即文件大小-8data.setUint32(offset, 36 + dataLength, true);offset += 4;// WAV文件标志writeString('WAVE');offset += 4;// 波形格式标志writeString('fmt ');offset += 4;// 过滤字节,一般为 0x10 = 16data.setUint32(offset, 16, true);offset += 4;// 格式类别 (PCM形式采样数据)data.setUint16(offset, 1, true);offset += 2;// 通道数data.setUint16(offset, channelCount, true);offset += 2;// 采样率,每秒样本数,表示每个通道的播放速度data.setUint32(offset, sampleRate, true);offset += 4;// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);offset += 4;// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8data.setUint16(offset, channelCount * (sampleBits / 8), true);offset += 2;// 每样本数据位数data.setUint16(offset, sampleBits, true);offset += 2;// 数据标识符writeString('data');offset += 4;// 采样数据总数,即数据总大小-44data.setUint32(offset, dataLength, true);offset += 4;// 写入采样数据if (sampleBits === 8) {for (var i = 0; i < bytes.length; i++, offset++) {var s = Math.max(-1, Math.min(1, bytes[i]));var val = s < 0 ? s * 0x8000 : s * 0x7FFF;val = parseInt(255 / (65535 / (val + 32768)));data.setInt8(offset, val, true);}} else {for (var i = 0; i < bytes.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, bytes[i]));data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);}}// this.bufferData = data;return new Blob([data], {type: 'audio/wav'});}};//开始录音this.start = function () {audioInput.connect(recorder);recorder.connect(context.destination);}//停止this.stop = function () {recorder.disconnect();initEchart(audioData.buffer);}//获取音频文件this.getBlob = function () {this.stop();return audioData.encodeWAV();}//回放this.play = function (audio) {audio.src = window.URL.createObjectURL(this.getBlob());}//音频采集recorder.onaudioprocess = function (e) {audioData.input(e.inputBuffer.getChannelData(0));//record(e.inputBuffer.getChannelData(0));}};//抛出异常HZRecorder.throwError = function (message) {alert(message);throw new function () {this.toString = function () {return message;}}}//是否支持录音HZRecorder.canRecording = (navigator.getUserMedia != null);//获取录音机HZRecorder.get = function (callback, config) {if (callback) {if (navigator.getUserMedia) {navigator.getUserMedia({audio: true} //只启用音频, function (stream) {var rec = new HZRecorder(stream, config);callback(rec);}, function (error) {switch (error.code || error.name) {case 'PERMISSION_DENIED':case 'PermissionDeniedError':HZRecorder.throwError('用户拒绝提供信息。');break;case 'NOT_SUPPORTED_ERROR':case 'NotSupportedError':HZRecorder.throwError('浏览器不支持硬件设备。');break;case 'MANDATORY_UNSATISFIED_ERROR':case 'MandatoryUnsatisfiedError':HZRecorder.throwError('无法发现指定的硬件设备。');break;default:HZRecorder.throwError('无法打开麦克风。异常信息:' + (error.code || error.name));break;}});} else {HZRecorder.throwErr('当前浏览器不支持录音功能。');return;}}}window.HZRecorder = HZRecorder;function cacl(arr, callback) {var ret;for (var i = 0; i < arr.length; i++) {ret = callback(arr[i], ret);}return ret;}Array.prototype.sum = function () {return cacl(this, function (item, sum) {if (typeof (sum) == 'undefined') {return Math.abs(item);} else {return sum += Math.abs(item);}});};Array.prototype.avg = function () {if (this.length == 0) {return 0;}return this.sum(this) / this.length;};function randomString(len) {len = len || 32;var $chars = 'abcdefhijkmnprstwxyz2345678';/****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/var maxPos = $chars.length;var pwd = '';for (i = 0; i < len; i++) {pwd += $chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;}
})(window);

JavaScript调用麦克风并录制wav音频相关推荐

html在线录音并上传,一种网页版在线录制wav音频的方法与流程
本发明涉及网页版音频录制的技术领域,特别涉及一种网页版在线录制wav音频的方法. 背景技术: 随着国内经济的快速发展,人们的生活水平越来越高,而随之带动了电子产品的广泛应用与高速发展,电子已普及到人们 ...
Android开发音效中录制WAV音频和录制MP3音频的讲解及实战（超详细附源码）
需要源码请点赞关注收藏后评论区留下QQ~~~ 一.录制WAV音频无论是MediaRecoredr录制的AMR和AAC音频,还是AudioRecord录制的PCM音频,都不能在计算机上直接播放,因为它 ...
python不用模块调用麦克风_python调用pyaudio使用麦克风录制wav声音文件的教程
python的pyaudio可以进行录音,播放,生成wav文件等等,WAVE是录音时用的标准的WINDOWS文件格式,文件的扩展名为WAV,数据本身的格式为PCM或压缩型,属于无损音乐格式的一种.在我 ...
python录音pyaudio_python调用pyaudio使用麦克风录制wav声音文件的教程
python的pyaudio可以进行录音,播放,生成wav文件等等,WAVE是录音时用的标准的WINDOWS文件格式,文件的扩展名为WAV,数据本身的格式为PCM或压缩型,属于无损音乐格式的一种.在我 ...
nanopc-T4 开发板通过USB麦克风采集录制音频
文章目录 1. 使用 nanopc-T4 开发板采集音频 2. 使用 Tyless外置usb麦克风录制声音 3. 使用 ffrmpeg 将实时视频与音频合并并推流到 rtmp 服务器中 4. 成功实现 ...
WAV音频文件结构及录制
1.WAV音频文件结构 WAVE文件作为多媒体中使用的声波文件格式之一,它是以RIFF格式为标准的.WAVE文件是由若干个Chunk组成的.按照在文件中的出现位置包括:RIFF WAVE Chunk, ...
java调用手机麦克风录音以及保存音频文件到服务器
1.应用场景:手机app内录制不超过60秒的录音,进行保存,可以实现播放实现过程 (1).前端调取手机麦克风,录制音频,转成base64文件传给后端 (2).后端将前端传过来的base64文件进行解 ...
Android多媒体学习八：调用Android自带的音频录制程序，实现录制
Android中有自带的音频录制程序,我们可以通过指定一个Action为MediaStore.Audio.Media.RECORD_SOUND_ACTION的Intent来启动它就可以了.然后在on ...
Android 手机录制wav格式音频文件实现
上一篇文章已经实现了在Android手机上使用MediaRecorder录音,但是后期在处理这些音频文件的时候发现3gp格式的音频不大方便处理,使用wav格式的音频处理起来更方便一些! 这里需要用到A ...

JavaScript调用麦克风并录制wav音频

JavaScript调用麦克风并录制wav音频相关推荐

最新文章

热门文章