How do in-browser audio players work?

Question

I've doing Javascript programming for some time but it's always been related to data updating, saving, manipulating, etc.

I have no idea how something like an in-browser audio player gets audio (especially live, streaming audio) from the internet and plays it out of my computer speakers.

How does this happen in Javascript?

For example, how does a website deliver live audio to my speakers using Javascript? http://player.streamtheworld.com/liveplayer.php?callsign=WVIEAM

Answer 1

The live audio is not much different from pre-recorded audio... it's just played back as it's received, and when live it's encoded as it's recorded.

In browsers these days, the most basic form of streaming audio is a simple <audio> tag. By changing the src attribute from a file to a stream, you're up and running:

<audio src="http://cdn.audiopump.co/waug/main_mp3_256k" />

The browser doesn't know or care in this case that the audio is a live stream. All it knows is that there's some media data that it's fetching via HTTP, and playing back while it comes in.

If your browser compatibility is good, it would be preferable to use the MediaSource API , giving you more control (such as switching to a different quality stream mid-stream, like in HLS ) and ensuring that the browser doesn't try to cache what is effectively an inifinitely sized file.

For example, how does a website deliver live audio to my speakers using Javascript? http://player.streamtheworld.com/liveplayer.php?callsign=WVIEAM

This particular site is ran by Triton Digital, and they still use Flash. Many sites still do this as a holdover from a time when HTML5 audio was not widely supported. There is little reason to do this today.

Other reasons to use Flash include incompatible server protocols. If your streaming server is using RTMP, you're stuck with Flash as browsers don't speak RTMP.

There used to be an issue with streaming AAC in-browser due to browsers not properly handling AAC wrapped in ADTS. (This encapsulation is required for streaming AAC in most situations.) Most browsers have resolved this, but I suspect that this is the reason Triton Digital is still using their Flash solution. By using Flash, they can play AAC/ADTS streams.