Воспроизведение аудио-потока из Java-приложения в HTML5-Audio-Tag

Я провел почти неделю, пытаясь воспроизвести аудиопоток в браузере, отправленный из моего Java-приложения. Воспроизведение одного файла не является проблемой. Чего я хочу добиться, так это воспроизводить постоянный поток (отправляемый в виде байтов-массивов-фрагментов) из Java-приложения, передавая массивы через ServerPush/Comet/Atmosphere клиенту.
Я пытался использовать Chrome 27.0.1453.94 м, Firefox 21.0 и IE 10.

Я работал с определением черновиков Web Audio API W3C, а также с некоторыми статьями о html5rocks ( введение, Web Audio API и Audio-Tag), а также с этим.
Для получения двоичных данных я нашел это.
Более того, по состоянию на этот и этот ogg должен воспроизводиться в Chrome и Firefox.

Использование Flash на самом деле не вариант, так как тогда мне понадобится совершенно другая настройка на сервере (с RTP-потоками и т. Д.), А также будет плохая поддержка мобильных устройств.

Буду признателен за любые намеки на то, что я делаю неправильно, или на способ, который работает для воспроизведения звука. Ниже я разместил свои настройки.

Моя настройка:

У меня есть "Stream-Service"-Класс, который читает аудиофайлы, транскодирует их в ogg (при необходимости) с JAVE и затем передает байтовые массивы клиенту. Я использую 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 ответов

Другие вопросы по тегам