Web Audio API与WebSocket播放实时音频_webaudioapi 实时语音输出

作者：菜鸟追梦旅行 | 2024-02-20 14:36:51

踩

webaudioapi 实时语音输出

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

即：将音频文件转为字节流，发送给前端。前端接收之后，打印显示为“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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/120086