<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta name="apple-mobile-web-capable" content="yes">
<title>录音并传递给后台</title>
</head>
<body>
<button id="intercomBegin">开始对讲</button>
<button id="intercomEnd">关闭对讲</button>
</body>
<script type="text/javascript">
var begin = document.getElementById('intercomBegin');
var end = document.getElementById('intercomEnd');
var ws = null; //实现WebSocket
var record = null; //多媒体对象，用来处理音频
var timeInte;
function init(rec) {
record = rec;
}
//录音对象
var Recorder = function (stream) {
var sampleBits = 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, //输入采样数位
outputSampleRate: sampleRate, //输出采样数位
oututSampleBits: sampleBits, //输出采样率
clear: function () {
this.buffer = [];
this.size = 0;
},
input: function (data) {
this.buffer.push(new Float32Array(data));
this.size += data.length;
},
};
var sendData = function () { //对以获取的数据进行处理(分包)
var reader = new FileReader();
reader.onload = e => {
var outbuffer = e.target.result;
var arr = new Int8Array(outbuffer);
if (arr.length > 0) {
var tmparr = new Int8Array(1024);
var j = 0;
for (var i = 0; i < arr.byteLength; i++) {
tmparr[j++] = arr[i];
if (((i + 1) % 1024) == 0) {
ws.send(tmparr);
if (arr.byteLength - i - 1 >= 1024) {
tmparr = new Int8Array(1024);
} else {
tmparr = new Int8Array(arr.byteLength - i - 1);
}
j = 0;
}
if ((i + 1 == arr.byteLength) && ((i + 1) % 1024) != 0) {
ws.send(tmparr);
}
}
}
};
audioData.clear();
};
this.start = function () {
audioInput.connect(recorder);
recorder.connect(context.destination);
}
this.stop = function () {
recorder.disconnect();
window.clearInterval(timeInte);
audioData.clear();
}
this.clear = function () {
audioData.clear();
}
recorder.onaudioprocess = function (e) {
var inputBuffer = e.inputBuffer.getChannelData(0);
audioData.input(inputBuffer);
sendData();
}
}
/*
* WebSocket
*/
function useWebSocket() {
ws = new WebSocket("ws://127.0.0.1:8808/webSocket/22");
ws.binaryType = 'arraybuffer'; //传输的是 ArrayBuffer 类型的数据
ws.onopen = function (event) {
console.log('握手成功');
timeInte = setInterval(function () {
record.start();
}, 300);
};
ws.onmessage = function (msg) {
console.info(msg)
}
ws.onerror = function (err) {}
}
/*
* 开始对讲
*/
begin.onclick = function () {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
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));
break;
}
}
)
}
}
/*
* 关闭对讲
*/
end.onclick = function () {
if (ws) {
record.stop();
var tmparr = new Int8Array(1024);
ws.send("1");
console.log('关闭对讲');
}
}
</script>
</html>
recorder-websocket.zip （1个子文件） 
demo.html 5KB
一只海里的鱼
- 粉丝: 2
最新资源
- 深度学习基于线性神经网络与卷积神经网络的基础理论及应用
- 企业进销存之销售和退换货
- Python进阶冷知识系列文档
- 人事工资管理系统：Java MySQL Mybatis Vue ElementUI实现
- 高校智能问答系统 + langflow + pgvector + gemini
- 企业进销存之采购业务模块解读
- C#窗体02Excel批量复制粘贴
- Win7系统下Chrome浏览器网页字体模糊问题的解决方法
- 企业ERP系统，适用于集采服务企业，提供完整的信息管理系统解决方案，实现内部管理和财税模块 章节讲解销售出库操作
- ### 【自然语言处理】基于自注意力机制的Transformer模型：机器翻译与句法分析中的应用
- Format-Name(Keil自动修改文件名1)
- 工具变量-地级市人力资本水平（1990-2024年）.xlsx
- 12口软件以及驱动.zip
- 航天领域基于机器学习和深度学习的两行定轨元改进轨道预测：低地球轨道卫星和空间碎片高精度轨道预报系统设计
- 本文提出了一种基于预测模型的时间序列异常检测方法，利用Transformer和一维卷积神经网络（1D CNN）来捕捉时间序列数据的动态模式
- 从0到1：用Gemini和PGVector构建你的企业级RAG智能问答系统
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论1