浏览器录音
原生浏览器录音实现
1.录音对象构造
var Recorder = function (stream) {
var sampleBits = 16; //输出采样数位 8, 16
var sampleRate = 16000; //输出采样率(单位时间内对模拟信号采样的多少)
var context = new AudioContext();
var audioInput = context.createMediaStreamSource(stream);
var recorder = context.createScriptProcessor(4096, 1, 1);
//录音模型
var audioData = {
size: 0, //录音文件长度
buffer: [], //录音缓存
inputSampleRate: 48000, //输入采样率
inputSampleBits: 16, //输入采样数位 8, 16
outputSampleRate: sampleRate, //输出采样数位
oututSampleBits: sampleBits, //输出采样率
clear: function () {
this.buffer = [];
this.size = 0;
},
input: function (data) {
this.buffer.push(new Float32Array(data));
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(length);
var index = 0,
j = 0;
while (index < length) {
result[index] = data[j];
j = compression;
index ;
}
return result;
},
encodePCM: 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(dataLength);
var data = new DataView(buffer);
var offset = 0;
for (var i = 0; i < bytes.length; i , offset = 2) {
var s = Math.max(-1, Math.min(1, bytes[i]));
//数据视图指定字节偏移量位置处设置 Int16 值
data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
}
return new Blob([data]);
}
};
var sendData = function () { //对以获取的数据进行处理(分包)
// FileReaderr接口提供了读取文件的方法和包含读取 结果的事件模型
var reader = new FileReader();
reader.onload = e => {
var outbuffer = e.target.result;
ws.send(outbuffer);
ws.send(JSON.stringify({
"type": "heartbeat"
}));
};
reader.readAsArrayBuffer(audioData.encodePCM());
audioData.clear(); //每次发送完成则清理掉旧数据
};
//构造录音对象方法
this.start = function () {
audioInput.connect(recorder);
recorder.connect(context.destination);
}
this.stop = function () {
recorder.disconnect();
}
this.getBlob = function () {
return audioData.encodePCM();
}
this.clear = function () {
audioData.clear();
}
recorder.onaudioprocess = function (e) {
var inputBuffer = e.inputBuffer.getChannelData(0);
audioData.input(inputBuffer);
// console.log(inputBuffer);
sendData();
}
2.调用录音对象
function getUserMedia(){
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (!navigator.getUserMedia) {
alert('浏览器不支持音频输入');
} else {
navigator.getUserMedia({
audio: true
},
//传入媒体流对象
function (mediaStream) {
init(new Recorder(mediaStream));
console.log('开始对讲');
useWebSocket();
},
function (error) {
switch (error.message || error.name) {
case 'PERMISSION_DENIED':
case 'PermissionDeniedError':
console.info('用户拒绝提供信息。');
break;
case 'NOT_SUPPORTED_ERROR':
case 'NotSupportedError':
console.info('浏览器不支持硬件设备。');
break;
case 'MANDATORY_UNSATISFIED_ERROR':
case 'MandatoryUnsatisfiedError':
console.info('无法发现指定的硬件设备。');
break;
default:
console.info('无法打开麦克风。异常信息:' (error.code || error.name));
alert('无法打开麦克风。异常信息:' (error.code || error.name))
break;
}
window.location.reload();
}
)
}
}
// 导出
$("#recordingslist").wordExport("会议记录");
js-audio-recorder插件录音
准备工作(下载,导入):
npm i js-audio-recorder
import Recorder from ‘js-audio-recorder’
1.实例语音对象
//实例化语音对象
data.recorder = new Recorder({
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
numChannels: 1 // 声道,支持 1 或 2, 默认是1
});
Recorder.getPermission().then(() => {
console.log('开始录音')
data.recorder.start() // 开始录音
}, (error) => {
console.log(`${error.name} : ${error.message}`)
})
2.获取录音数据
var blob = data.recorder.getWAVBlob()//获取wav格式音频数据
//转成相应类型文件
var newbolb = new Blob([blob], { type: 'audio/wav' })
var fileOfBlob = new File([newbolb], new Date().getTime() '.wav')
3.主要功能api
recorder.resume() // 恢复录音
recorder.play() // 播放录音
recorder.pausePlay() // 暂停播放
recorder.resumePlay() // 恢复播放
recorder.stopPlay() // 停止播放
recorder.destroy() // 毁实例
注意事项
如部署在局域网 ip 访问时 web 录音功能需进行权限配置,以 Chrome 浏览器为例,键入访问 chrome://flags/#unsafely-treat-insecure-origin-as-secure 在 Insecure origins treated as secure 中添加启用部署后项目 ip 地址
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghcbkg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13