在HTML5-Audio-Tag中播放来自Java应用程序的音频流

时间:2013-05-30 17:40:25

标签: audio-streaming html5-audio server-push webkitaudiocontext

我花了将近一周时间尝试在我的java应用程序发送的浏览器中播放音频流。播放单个文件不是问题。我想要实现的是通过ServerPush / Comet / Atmosphere将数组推送到客户端,从java应用程序中播放一个恒定的流(以字节数组块的形式发送)。 我尝试过使用Chrome 27.0.1453.94 m,Firefox 21.0和IE 10。

我一直在使用Web Audio API W3C drafts definition,还有一些关于html5rocks(an introWeb Audio API and Audio-Tag)以及this的文章。
为了接收二进制数据,我找到了this 此外,thisthis ogg应该可以在Chrome和Firefox中播放。

使用Flash并不是一个真正的选择,因为我需要在服务器上使用完全不同的设置(使用RTP-Streams等),并且对移动设备的支持也会很差。

我很欣赏任何关于我做错的提示或者用于播放音频的方法。 下面我发布了我的设置。

我的设置:

我有一个“Stream-Service”类,它读取音频文件,用JAVE将它们转码为ogg(如果需要),然后将字节数组提交给客户端。 我使用Atmosphere将新的音频块推送到客户端(HTTP-ResponseType设置为“arraybuffer”)。 推送到客户端的每个字节数组大小为1400字节,并且是base64和json编码的服务器端。

在Javascript中我有约。以下代码(某些部分与问题无关):

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();
});

0 个答案:

没有答案