Websocket推送的byte字节流，如何使用AudioContext进行播放
var AudioContext = window.AudioContext ||
window.webkitAudioContext ||
window.mozAudioContext ||
window.oAudioContext ||
window.msAudioContext;
function playAuido(blob){
var fr = new FileReader();
fr.onload = function () {
var arrBuff = this.result; // ab是转换后的结果
audioContext.decodeAudioData(arrBuff, function (buffer) {
var source = audioContext.createBufferSource();
source.buffer = buffer; // This is the line that generates the error
source.connect(audioContext.destination);
source.start(0);
}
}
fr.readAsArrayBuffer(blob);
}
请参考以下代码
let context = new (window.AudioContext || window.webkitAudioContext)();
// ...onmessage时执行
function onMessage(evt) {
// 处理接收到的数据
// 这里假定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
});
}
}
//播放声音
function playSound(buffer) {
var source = context.createBufferSource(); // 创建一个声音源
source.buffer = buffer; // 告诉该源播放何物
source.connect(context.destination); //将该源与硬件相连
source.start(0); // 开始播放
}
如有帮助请采纳~
<button onclick="playAudio()">playAudio</button>
<button onclick="resumeAudio()">resumeAudio</button>
<button onclick="stopAudio()">stopAudio</button>
<script>
var ctx = new (window.AudioContext || window.webkitAudioContext())();
let source = ctx.createBufferSource(); // 创建音频源头姐点
// 播放
async function playAudio() {
const audioBuffer = await loadAudio();
playSound(audioBuffer);
}
// 暂停
async function resumeAudio() {
if (ctx.state === "running") {
ctx.suspend();
} else if (ctx.state === "suspended") {
ctx.resume();
}
}
// 停止
async function stopAudio() {
source.stop();
}
async function loadAudio() {
const audioUrl = "love105.mp3";
const res = await fetch(audioUrl);
const arrayBuffer = await res.arrayBuffer(); // byte array字节数组
const audioBuffer = await ctx.decodeAudioData(arrayBuffer, function(
decodeData
) {
return decodeData;
});
return audioBuffer;
}
async function playSound(audioBuffer) {
source.buffer = audioBuffer; // 设置数据
source.loop = true; //设置，循环播放
source.connect(ctx.destination); // 头尾相连
// 可以对音频做任何控制
source.start(0); //立即播放
}
</script>
你好，可以采用如下方法：
unction getBlob2(data,len){ var buffer = new ArrayBuffer(len); var dataview = new DataView(buffer); writeUint8Array(dataview,0,data,len); return new Blob([dataview], { type: 'audio/wav' }); } websocket.onmessage = function got_packet(msg) { var data = msg.data; var datalen = msg.data.size; { var reader = new FileReader(); reader.onload = function(evt) { if(evt.target.readyState == FileReader.DONE) { var data = new Uint8Array(evt.target.result); /* // 方式1 ,ok audioContext.decodeAudioData(evt.target.result, function(buffer) {//解码成pcm流 var audioBufferSouceNode = audioContext.createBufferSource(); audioBufferSouceNode.buffer = buffer; audioBufferSouceNode.connect(audioContext.destination); audioBufferSouceNode.start(0); }, function(e) { alert("Fail to decode the file."); }); */ //方式2 ok audio.src = window.URL.createObjectURL(getBlob2(data,data.length)); } } reader.readAsArrayBuffer(data); }
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Web Audio API 测试</title>
<script src="../static/js/reconnectingwebsocket.js"
th:href=@{/js/reconnectingwebsocket.js}></script>
</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 nextStartTime = 0;
var context = null;
try {
context = new (window.AudioContext || window.webkitAudioContext)();
} catch (e) {
alert('您当前的浏览器不支持Web Audio API ');
}
var objSocket = null;
var wsUrl = 'ws://localhost:8080/Audiowebsocket';
if ('WebSocket' in window) {
//objSocket = new ReconnectingWebSocket(wsUrl);
objSocket = new WebSocket(wsUrl);
} else {
alert('Not support websocket')
}
/**
WebSocket服务连接
*/
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) {
console.log("decode success");
playSound(buffer);
}, function(e) {
console.log("decode failed");
"Error with decoding audio data" + e.err
});
}
//--------onMessage-----end-----------
}
//播放声音
function playSound(buffer) {
var source = context.createBufferSource();
source.buffer = buffer;
if (nextStartTime == 0) {
nextStartTime = context.currentTime + buffer.duration / 2;
}
source.connect(context.destination);
console.log("nextStartTime=" + nextStartTime);
source.start(nextStartTime);
//source.start(0);
nextStartTime += buffer.duration;
if (nextStartTime > 11) {
nextStartTime = 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>
https://blog.csdn.net/tianshan2010/article/details/111977937