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>参数:</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 APIvar 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

Web Audio API与WebSocket播放实时音频相关推荐

【Web】1326- 深入浅出 Web Audio API
前言 2011被提出,同年草案被Google Chrome和Mozilla Firefox实现在此之前Web音频较为原始,无法应付较为复杂的应用场景,例如Web游戏或互动应用旨在提供全套Web音频 ...
利用Web Audio API将振动数据转化为音频数据并播放
年初在公司做了一个需求:传感器采集到了机器的振动数据,要在网页中利用这个数据播放出振动的声音. 之前只了解过HTML中的<audio>元素可以通过src属性指定音频文件路径来播放音频,现在 ...
HTML 利用 Web Audio API 进行音频可视化
利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...
ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别
处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整 ...
html audio重新播放,javascript – Web Audio API：如何重新开始播放声音？
我在Chrome中编写了一个基本脚本,它使用新的Web Audio Api加载3个声音文件(通过 XMLHTTPRequest),并逐个播放它们.我为每个声音提供了一个单独的按钮,允许用户启动和停止每 ...
用web audio api 在canvas上画出音频的音轨
上一篇讲了一下如何用web audio api实现播放,这一篇讲一下如何画音轨吧
利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客原文地址一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...
Web Audio API实现简单变声效果
前言想在网页中实现实时音频变声效果该如何实现呢,之前遇到这种处理音视频的需求,可能会想到需要借助C代码实现.但是现在随着浏览器性能的提升.web API的丰富,通过浏览器原生的API也可以操作音频数 ...
如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音
by _haochuan 通过_haochuan 如何使用Web Audio API听到" Yanny"和" Laurel"的声音 (How you can h ...

Web Audio API与WebSocket播放实时音频

Web Audio API与WebSocket播放实时音频相关推荐

最新文章

热门文章