<
td
>
<
input style
=
"width: 390px;"
type
=
"text"
name
=
"type"
id
=
"type"
>
<
/td
>
<
button onclick
=
"onSendMessage()"
>
发送消息
<
/button
>
<
button onclick
=
"onCloseMessage()"
>
断开连接
<
/button
>
<
/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
WebSocket客户端与Web Audio API示例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Web Audio API 测试</title> </head> <body> <table> <tr> <td>参数:</td> <td>
Websocket音频客户端
基本测试页，用于从浏览器将音频发送到Websocket服务器
这是一个HTML页面，它使用Web音频和getUserMedia创建与发送和接收音频的WebSocket服务器的客户端连接； 这对于测试使用Nexmo WebSocket API的WebSocket服务器而不用从Nexmo进行调用非常有用。
您可以在任何地方（例如本地主机）托管它，也可以在使用托管版本。
如果在URL框中输入wss://echo.websocket.org并单击connect，您将连接到演示WebSocket回显服务器，使用对讲按钮（如对讲机上的即按即说）来发送音频通过麦克风，您应该可以听到自己的声音。
当前它仅支持16khz PCM音频速率（TODO 8Khz）
不支持在连接（TODO）上发送初始JSON消息
不支持DTMF事件（TODO）
最近项目需要在网页上实现可实时听后端传来的音频数据,并绘制成波形,花费了两个星期折腾出来,特此记录一下(博主也是前端小白一枚~~).
demo源码:https://github.com/xxxxxxbin6/WebAudio/tree/master
vue中websocket的使用网上有很多的教程,就不赘述,直接上代码了:
这里的player是开源的一个播放pcm流的控件,叫PCMPlayer(项目地址:https://github.com/samirkumard...
说到
websocket想比大家不会陌生，如果陌生的话也没关系，一句话概括
“
WebSocket protocol 是
HTML5一种新的协议。它实现了浏览器与服务器全双工通信”
WebSocket相比较传统那些服务器推技术简直好了太多，我们可以挥手向comet和长轮询这些技术说拜拜啦，庆幸我们生活在拥有
HTML5的时代~
这篇文章我们将分三部分探索
websocket
在上篇文（ 基于html5 WebSocket和WebRTC实现IM和视音频呼叫（一））里我们已经用Jetty-7.5.4.v20111024搭起了一个WebSocket server，现在就可以编写自己的WebSocket Server逻辑完成自己的实现了。
一、编写WebSocket服务端逻辑
MyWebSocketServlet类继承自Jetty开发包中的org.eclipse.jett...
ArrayBuffer DataView 数据存储方式 字节序处理ArrayBuffer & DataView图解数据的存储方式数据溢出截断字节序处理参考链接PCM player demo
原文地址：Github
Javascript在数据的处理上一直不是强项，比如数字不分整型和浮点数统一使用了64位浮点数，如果涉及到二进制运算则显得非常无力，在数据传输上也非常浪费带宽。在ES6针对Javascript二进制数据处理上的无力引入了原始缓冲区ArrayBuffer，并且还提供了多种位数的int类型
Unity通过WebAPI与WebSocket的连接，实现了与讯飞语音识别与合成的功能。这个连接的过程中，Unity首先使用WebAPI向讯飞开放平台发送语音请求，获取到参数后发送语音数据。语音数据通过WebSocket封装后发送给讯飞云API，在云端进行语音识别与合成的处理。处理结果再通过WebSocket返回给Unity，最终在游戏场景中实现了语音识别与合成的功能。
这种在线语音识别与合成的方式给游戏开发者带来了极大的方便，使得游戏互动更加自然。无需使用繁琐的文本输入方式，玩家可以直接与游戏进行语音交互。同时，这种方式也为游戏开发的智能化提供了可能，通过语音识别在游戏中添加更多和交互相关的功能。
然而，这种在线方式的缺点也不容忽视。因为依赖云端处理，必须保持网络连接，如果网络信号不好或者服务器端出现问题，可能会造成语音识别与合成的不稳定性。另外，在一些游戏场景下，语音输入的灵敏度和准确度也是需要考虑的问题。总之，语音识别与合成是游戏开发的新趋势之一，需要游戏开发者在实践中不断探索和创新。
[code=java]
Exception in thread "main" java.lang.AbstractMethodError: org.apache.flink.streaming.connectors.kafka.Kafka09TableSource.getTableSchema()
[/code]