Web Audio API与WebSocket播放实时音频

WebSocket客户端与Web Audio API示例<!DOCTYPE html><html><head><meta charset="utf-8"><title>Web Audio API 测试</title></head><body><table><tr><td&g

香蕉i

9740人浏览 · 2020-08-05 15:57:41

香蕉i · 2020-08-05 15:57:41 发布

WebSocket客户端与Web Audio API示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Web Audio API 测试</title>
	</head>
	<body>
		<table>
			<tr>
				<td>参数:</td>
				<td><input style="width: 390px;" type="text" name="type" id="type"></td>
				<td>
					<button onclick="onSendMessage()">发送消息</button>
				</td>
				<td>
					<button onclick="onCloseMessage()">断开连接</button>
				</td>
			</tr>

		</table>
	</body>

	<script>
		//Web Audio API
		var context;
		try {
			context = new(window.AudioContext || window.webkitAudioContext)();
		} catch (e) {
			alert('您当前的浏览器不支持Web Audio API ');
		}


		//测试
		var wsServer = 'ws://localhost:8099';

		/** 
			WebSocket服务连接
		*/
		var objSocket = new WebSocket(wsServer);
		objSocket.onopen = function(evt) {
			onOpen(evt)
		};
		objSocket.onclose = function(evt) {
			onClose(evt)
		};
		objSocket.onmessage = function(evt) {
			onMessage(evt)
		};
		objSocket.onerror = function(evt) {
			onError(evt)
		};

		function onOpen(evt) {
			console.log("Connected to WebSocket server.");
		}

		function onClose(evt) {
			console.log("Disconnected");
		}

		function onError(evt) {
			console.log('Error occured: ' + evt.data);
		}

		function onMessage(evt) { //websocket返回数据信息处理
			console.log('Retrieved data from server: ' + evt.data);

			var reader = new FileReader(); //文件阅读器
			reader.readAsArrayBuffer(evt.data); //读取成ArrayBuffer对象
			reader.onload = function() { //读取完毕
				//解码
				context.decodeAudioData(this.result, function(buffer) {
					playSound(buffer);
				}, function(e) {
					"Error with decoding audio data" + e.err
				});
			}

			//--------onMessage-----end-----------
		}

		//播放声音
		function playSound(buffer) {
			var source = context.createBufferSource(); // 创建一个声音源
			source.buffer = buffer; // 告诉该源播放何物
			source.connect(context.destination); //将该源与硬件相连
			source.start(0); // 开始播放
		}
		
		//发送消息
		function onSendMessage() {
			var mess = document.getElementById("type").value;
			objSocket.send(mess);
			/* if (window.confirm("发送消息：" + mess)) {
				//alert("确定");
				objSocket.send(mess);
				return true;
			} else {
				//alert("取消");
				return false;
			} */
		}

		//关闭连接
		function onCloseMessage() {
			objSocket.close()
		}
	</script>
</html>

WebScoket服务端的实现参考：https://blog.csdn.net/weixin_42393724/article/details/107404518

另外，在以上的WebScoket服务端代码的基础上，为使服务端向客户端发送音频数据，需增加如下代码：

            File file = new File("D:\\a_test\\5603.mp3");
            //读取指定路径下面的文件
            byte[] buffer = null;
            try {
                FileInputStream fis = new FileInputStream(file);
                ByteArrayOutputStream bos = new ByteArrayOutputStream(1000);
                byte[] b = new byte[1000];
                int n;
                while ((n = fis.read(b)) != -1) {
                    bos.write(b, 0, n);
                }
                fis.close();
                bos.close();
                buffer = bos.toByteArray();
                //发送至客户端
                ws.send(buffer);

即：将音频文件转为字节流，发送给前端。前端接收之后，打印显示为“Blob对象”

使用Web Audio api播放wav格式的音频数据流，需要有头信息；
（参考：https://blog.csdn.net/weixin_42393724/article/details/107693057）

Web Audio API参考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

IIC通信

“线与” 并非传统数字电路中 “多个输出端直接连接” 的物理与逻辑（需特定门电路），而是 IIC 通过总线外部上拉电阻 + 设备开漏输出（Open-Drain）实现的逻辑效果：解决 “多主竞争” 的总线仲裁当多个主设备同时尝试占用总线时（多主模式），IIC 通过 “总线仲裁” 避免数据冲突，而仲裁的核心就是线与特性：IIC（Inter-Integrated Circuit，集成电路间总线）是由飞

2048 AI社区

AI 重塑费控生态：2025 年全球十大费控系统选型指南

在功能参数维度(40%)，汇联易覆盖商旅、交通、餐饮、采购等95%企业消费场景，支持机票、酒店、用车、火车等资源整合与比价，得分38.5分。生态集成深度维度，汇联易94分的成绩反映了其与主流ERP、OA、HR系统的深度集成能力。汇联易的实施周期通常为3-6个月，包括需求调研、系统配置、数据迁移、用户培训、试运行、正式上线等阶段，并提供持续的运维支持。2025年的费控系统市场正在经历深刻变革，AI技