WEB前端语音对讲实现方案以及示例

最新推荐文章于 2024-05-21 14:28:57 发布

klsstt

最新推荐文章于 2024-05-21 14:28:57 发布

阅读量2.4w

点赞数 19

分类专栏： JS 前端 HTML5 文章标签：前端音频双向对讲实时语音对讲 HTML

本文链接：https://blog.csdn.net/klsstt/article/details/94616528

版权

WEB前端语音对讲实现方案以及示例

需求
实现
难点
- 1.实时输出音频数据
- 2.实时数据解析，播放

需求

司机需要通过车载终端设备与WEB平台进行语音对讲，目前已实现WebSocket服务端，需要实现客户端

说到websocket想比大家不会陌生，如果陌生的话也没关系，一句话概括
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信

实现

我们需要在web端实现双向对讲，首先创建html文件，这个只是用来做个demo，比较简单：

<html>
<head>
    <meta charset="utf-8">
	<title>test</title>
</head>
<body>
<div>
	<button id="intercomBegin">开始对讲</button>
	<button id="intercomEnd">关闭对讲</button>
</div>
</body>
<script>
var begin = document.getElementById('intercomBegin');
var end = document.getElementById('intercomEnd');
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var ws = null;//实现WebSocket 
var record=null;//多媒体对象，用来处理音频
var timeInte = null;//定义一个定时器
begin.onclick = function() {
	console.log('开始对讲')
}
end.onclick = function() {
	console.log('关闭对讲')
    if(ws) {
        ws.close();
		record.stop();
		clearInterval(timeInte);
    }
}
</script>
</html>

难点

第一个是实时输出音频数据，第二是实时解析输入的音频流并进行播放

1.实时输出音频数据

这里要介绍一下Navigator.getUserMedia()方法，点我查看API文档
该方法提醒用户需要使用的设备类型，音频（true或者false）和视频（true或者false），比如麦克风。
如下例，我们使用音频输入，获取mediaStream，构建相关业务对象：

function init(rec){
	record = red;
}
if (!navigator.getUserMedia) {
	alert('浏览器不支持音频输入');
}else{
	navigator.getUserMedia(
            { audio: true },
              function (mediaStream) {
                  init(new Recorder(mediaStream));
            },function(error){
				console.log(error)
			}
	)
}
//录音对象
var Recorder = function(stream) {
    var sampleBits = 16;//输出采样数位 8, 16
    var sampleRate = 8000;//输出采样率
    var context = new AudioContext();
    var audioInput = context.createMediaStreamSource(stream);
    var recorder = co

最低0.47元/天解锁文章

klsstt

关注

19
点赞
踩
99

收藏

觉得还不错? 一键收藏
29
评论
WEB前端语音对讲实现方案以及示例

WEB前端语音对讲实现方案以及示例需求实现难点1.实时输出音频数据2.实时数据解析，播放需求司机需要通过车载终端设备与WEB平台进行语音对讲，目前已实现WebSocket服务端，需要实现客户端说到websocket想比大家不会陌生，如果陌生的话也没关系，一句话概括WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信实现我们需要在web端实...
复制链接

扫一扫