Databases
StackOverflow2013
Postsdbo
POPlay Audio-Stream from Java-Application in HTML5-Audio-Tag
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPlay Audio-Stream from Java-Application in HTML5-Audio-Tag
    primarykey
    data
    text
    <p>I've spent now almost a week trying to play an audio-stream in the browser sent from my java application. Playing a single file is not the problem. What I want to achieve is playing a constant stream (sent in form of byte-array-chunks) from a java application by pushing the arrays via ServerPush/Comet/Atmosphere to the client.<br> I have tried using Chrome 27.0.1453.94 m, Firefox 21.0 and IE 10.</p> <p>I have been working with the <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html" rel="nofollow">Web Audio API W3C drafts definition</a>, also some articles on html5rocks (<a href="http://www.html5rocks.com/en/tutorials/webaudio/intro/" rel="nofollow">an intro</a>, <a href="http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs" rel="nofollow">Web Audio API and Audio-Tag</a>) and also <a href="http://9elements.com/html5demos/audio/" rel="nofollow">this</a>.<br> For receiving binary data I have found <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data" rel="nofollow">this</a>.<br> Moreover as of <a href="https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats" rel="nofollow">this</a> and <a href="http://www.w3schools.com/tags/tag_audio.asp" rel="nofollow">this</a> ogg should be playable in Chrome and Firefox.</p> <p>Using Flash is not really an option as then I would need a complete different setup on the server (with RTP-Streams, etc.) and there also would be bad support for mobile devices.</p> <p>I would appreciate any hints on what I'm doing wrong or a way that works to play audio. Below I posted my setup.</p> <p><strong>My Setup:</strong></p> <p>I have a "Stream-Service"-Class which reads audio files, transcodes them to ogg (if necessary) with <a href="http://www.sauronsoftware.it/projects/jave/" rel="nofollow">JAVE</a> and then submits byte-arrays to the client. I use Atmosphere to push new audio chunks to the client (The HTTP-ResponseType is set to "arraybuffer"). Each byte-array that is pushed to the client is of 1400 bytes size and is base64- and json-encoded serverside.</p> <p>In Javascript I have approx. the following code (some parts left out as not relevant for the problem):</p> <pre><code>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(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USStefan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. CONot related, but why are you creating a `new Audio()` when you don't use it at all?
      singulars
      1. POPlay Audio-Stream from Java-Application in HTML5-Audio-Tag
      1. USidbehold
    2. COI'm quite new to this HTML5/audio-stuff - so my guess is I'm doing something wrong. But it's used here? => this.source = this.audioContext.createMediaElementSource(audio);
      singulars
      1. POPlay Audio-Stream from Java-Application in HTML5-Audio-Tag
      1. USStefan
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload