实现效果:PC端通过麦克风录音,通过 WebSocket实时传递到后台
原始每包数据过于大,后台不能接收,需要分包处理,每包最大1024
原始采样率为48000;通过合并压缩为自己所需采样率,demo中最终采样率为16000`
<!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>
<style type="text/css">
.comments {
width: 100%; /*自动适应父布局宽度*/
overflow: auto;
word-break: break-all;
/*在ie中解决断行问题(防止自动变为在一行显示,主要解决ie兼容问题,ie8中当设宽度为100%时,文本域类容超过一行时,
当我们双击文本内容就会自动变为一行显示,所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/
}
</style>
</head>
<body>
<div id="controls">
<button id="intercomBegin">开始</button>
<button id="intercomEnd">关闭对讲</button>
</div>
<textarea id="textResult" class="comments" rows="10" cols="10"></textarea>
</body>
<!-- <script src="./recorder3.js"></script> -->
<script type="text/javascript">
var result = ''
var textResult = document.getElementById("textResult");
var begin = document.getElementById('intercomBegin');
var end = document.getElementById('intercomEnd');
var ws = null; //实现WebSocket
var record = null; //多媒体对象,用来处理音频
var interval; //定时器
function init(rec) {
record = rec;
}
/*
* 开始对讲
*/
begin.onclick = function() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
if (!navigator.getUserMedia) {
alert('浏览器不支持音频输入');
} else {
navigator.getUserMedia({
audio: true
},
function(mediaStream) {
init(new Recorder(mediaStream));
console.log(mediaStream)
console.log('开始对讲');
useWebSocket();
},
function(error) {
console.log(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