1

I am trying to play an IceCast stream (MP3 streaming over HTTP) via the Web Audio API (not an audio tag), support for recent browsers except IE is an unfortunate requirement.

All examples and projects I can find regarding this either use a XMLHttpRequest to load a whole file (which won't work because the request will never be finished), or stream live user input (microphone) via createMediaStreamSource.

How can I use the Web Audio API to create a sourceNode from a stream?

Here's a demo showing that indeed XMLHttpRequest can not be used to load binary streams: http://codepen.io/rrorg/pen/EyAmBa?editors=1010

René Roth
  • 1,979
  • 1
  • 18
  • 25
  • @guest271314 different topic, I am trying to find a solution not using `audio` tags and delays are not a problem – René Roth Aug 13 '16 at 18:38
  • You can substitute Web Audio API for ` – guest271314 Aug 13 '16 at 18:41
  • Let me repeat: I am trying to find a solution not using audio tags and delays are not a problem – René Roth Aug 13 '16 at 18:41
  • 1
    Yes, you can use `ReadableStream` returned by `response.body` of `fetch()` to update audio context. – guest271314 Aug 13 '16 at 18:43
  • `fetch` seems like a good solution, but the [browser support](http://caniuse.com/#feat=fetch) is just not there yet :( – René Roth Aug 13 '16 at 18:49
  • `fetch` appears to be supported at same browsers Web Audio API is supported, save for safari http://caniuse.com/#feat=fetch – guest271314 Aug 13 '16 at 18:53
  • 1
    You could also use `XMLHttpRequest`, `FileReader` to recursively append `Blob` or `ArrayBuffer` of stream to audio context, until end of stream. – guest271314 Aug 13 '16 at 18:55
  • Safari is my main concern in this, yes. Is there a way in `XMLHttpRequest` to get the blob data before the `onload` event? This will never fire since the stream is basically an "infinite" download. – René Roth Aug 13 '16 at 19:05
  • _"Safari is my main concern in this, yes. Is there a way in XMLHttpRequest to get the blob data before the onload event? This will never fire since the stream is basically an "infinite" download."_ Can you update Question to include these details, `html`, current `javascript` tried to solve issue? You should be able to append `Blob` or `ArrayBuffer` to stream continuously – guest271314 Aug 13 '16 at 19:08
  • What code would be helpful in this case? XMLHttpRequest will simply not give you the raw data before the request is finished, unless you're streaming text. – René Roth Aug 13 '16 at 19:40
  • You can set `XMLHttpRequest.responseType` to `"blob"` or `"arraybuffer"`. At `load` event of request, append chunk of binary data from response to stream by appending `ArrayBuffer` or `Blob` of binary data to existing streaming `ArrayBuffer` or `Blob URL` at audio context. Can you include the `javascript` that you have tried at Question? – guest271314 Aug 13 '16 at 19:47
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120884/discussion-between-rene-roth-and-guest271314). – René Roth Aug 13 '16 at 19:49
  • I have made a [demo](http://codepen.io/rrorg/pen/EyAmBa?editors=1010) showing that no load event will be triggered for a stream. – René Roth Aug 13 '16 at 19:56
  • Is requirement to not use `fetch()`? – guest271314 Aug 13 '16 at 20:04
  • as answered before, I need Safari support :( – René Roth Aug 13 '16 at 20:05
  • _"as answered before, I need Safari support :( "_ should be included at Question as requirement? With links to safari support for `fetch()`? – guest271314 Aug 13 '16 at 20:07
  • I edited it into the question to make you happy. The StackOverflow comment box explicitly states "use comments to ask for more information" - which is what you did and you got your answer. Please stop derailing this discussion. If you feel the need to adjust the initial question, you're free to use the appropriate StackOverflow edit function. – René Roth Aug 13 '16 at 20:11
  • Have you tried using `new Audio()`? – guest271314 Aug 13 '16 at 21:00
  • `new Audio()` is exactly the same as creating an ` – René Roth Aug 13 '16 at 21:16
  • What is expected output `AudioNode` of audio stream? `MediaStreamAudioSourceNode` itself is an `AudioNode` . Why cannot an `AudioNode` be created and utilized using `new Audio()`? See https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamAudioSourceNode – guest271314 Aug 13 '16 at 21:27
  • Are you trying to play audio without using an `AudioNode`? _"The AudioContext interface represents an audio-processing graph built from audio modules linked together, each represented by an [`AudioNode`](https://developer.mozilla.org/en-US/docs/Web/API/AudioNode). "_ See [`AudioContext`](https://developer.mozilla.org/en-US/docs/Web/API/) – guest271314 Aug 13 '16 at 21:49
  • 1
    Why don't you want to use a normal audio node? – Brad Aug 14 '16 at 22:25
  • @RenéRoth _"XMLHttpRequest will simply not give you the raw data before the request is finished, unless you're streaming text."_ Was able to retrieve binary string of `.responseText` of `XMLHttpRequest()` to second link at codepen http://codepen.io/rrorg/pen/EyAmBa?editors=1010, and convert to an `ArrayBuffer`, though `.decodeAudioData()` is logging error `DOMException: Unable to decode audio data` – guest271314 Aug 15 '16 at 04:04
  • 1
    Would it be possible to use ` – MarijnS95 Aug 17 '16 at 15:31
  • 1
    @Brad - I would imagine the reason is that OP didn't want to use – Jules Mar 26 '18 at 15:46
  • @Brad I'd appreciate a theoretical technical write up, which should not hinder your chances of making a sale, I assume :) – René Roth Mar 27 '18 at 14:28

0 Answers0