Audio streaming 在HTML5音频标签中播放来自Java应用程序的音频流
我花了将近一个星期的时间试图在浏览器中播放java应用程序发送的音频流。播放单个文件不是问题。我想要实现的是,通过ServerPush/Comet/Atmosphere将数组推送到客户机,播放java应用程序中的恒定流(以字节数组块的形式发送)。Audio streaming 在HTML5音频标签中播放来自Java应用程序的音频流,audio-streaming,html5-audio,server-push,webkitaudiocontext,Audio Streaming,Html5 Audio,Server Push,Webkitaudiocontext,我花了将近一个星期的时间试图在浏览器中播放java应用程序发送的音频流。播放单个文件不是问题。我想要实现的是,通过ServerPush/Comet/Atmosphere将数组推送到客户机,播放java应用程序中的恒定流(以字节数组块的形式发送)。 我试过使用Chrome27.0.1453.94M、Firefox21.0和IE10 我一直在研究,还有一些关于html5rocks(,)的文章,还有。 用于接收我找到的二进制数据。 此外,as和ogg应该可以在Chrome和Firefox中播放 使用F
我试过使用Chrome27.0.1453.94M、Firefox21.0和IE10 我一直在研究,还有一些关于html5rocks(,)的文章,还有。
用于接收我找到的二进制数据。
此外,as和ogg应该可以在Chrome和Firefox中播放 使用Flash并不是一个真正的选项,因为那时我需要在服务器上进行完全不同的设置(使用RTP流等),而且对移动设备的支持也不好 如果有任何关于我做错了什么的提示或播放音频的方法,我将不胜感激。 下面我发布了我的设置 我的设置: 我有一个“流服务”类,它读取音频文件,将它们转码到ogg(如果需要),然后将字节数组提交给客户端。 我使用Atmosphere将新的音频块推送到客户端(HTTP响应类型设置为“arraybuffer”)。 推送到客户机的每个字节数组大小为1400字节,并且是base64和json编码的服务器端 在Javascript中,我有大约以下代码(一些被忽略的部分与问题无关):
不相关,但是为什么你在根本不使用的情况下创建一个
新音频()
?我对HTML5/音频的东西很陌生-所以我猜我做错了什么。但它在这里使用?=>this.source=this.audioContext.createMediaElementSource(音频);
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var initStreaming = {
audioContext : {},
source : {},
socket : $.atmosphere,
transport : 'websocket',
connect : function() {
var audio = new Audio();
audio.controls = true;
audio.autoplay = true;
audio.volume = 0.5;
audio.oncanplay = function() {
console.log("Has audio to play.");
// Just for test purposes: This message is never printed...
};
document.body.appendChild(audio);
this.audioContext = new AudioContext();
// Firefox doesn't seem to know this function:
this.source = this.audioContext.createMediaElementSource(audio);
// For this I also have tried using this in Firefox - but then FF crashes without warning:
// this.source = this.audioContext.createBufferSource();
this.source.connect(this.audioContext.destination);
this.socket.subscribe(this.request);
},
request : {
// ... request config and some onXY-Methods left out here
onMessage : function(response) {
try {
var json = $.parseJSON(response.responseBody);
// The next 4 Statements is to get an ArrayBuffer out of the JSON Object to pass to 'decodeAudioData'
var blob = new Blob(json, {type : 'arraybuffer'});
var fileReader = new FileReader();
fileReader.onload = function() {
initStreaming.audioContext.decodeAudioData(
this.result, // Argument must be of type ArrayBuffer
function(decodedBuffer) {
initStreaming.source.buffer = decodedBuffer;
initStreaming.source.start(0);
},
function(error) {
// Chrome always goes straight to this part.
console.log("An error in decodeAudioData");
// In Chrome error is null
console.debug(error);
});
};
fileReader.readAsArrayBuffer(blob);
} catch (error) {
console.log("OOOOPPPS!");
console.log(error);
}
}
}
};
window.addEventListener('load', function(e) {
initStreaming.connect();
});