This is a quick one. While playing around with Server-Sent Events I've created this page to consume my Bohemian Rhapsody stream.

How it works

Before building this page I had created a stream that sends Queen's Bohemian Rhapsody lyrics as messages.

Those messages are sent obeying the time they would appear in the song. What this means is if you press play when the first verse is received you are able to listen to the song synced with the lyrics.

Stream Page


I intend to publish both server and client's source code as soon I have time for this.

The server was made using NodeJS (I need to improve it a little bit).

The client uses the native implementation of EventSource to consume the stream. This is how it looks like:

const eventSource = new EventSource(STREAM_URL)

eventSource.onmessage = (message) => {
  container.innerHTML =

eventSource.onerror = (error) => {
  container.innerHTML = 'Sorry! Something went wrong with the stream'

eventSource.addEventListener('started', (e) => {
    status.innerHTML = 'Playing...'

eventSource.addEventListener('stopped', (e) => {
    status.innerHTML = 'Stopped'

This is a minimum implementation for testing the stream.

This is how the raw stream looks like: bohemian_rhapsody_stream


To avoid complications I decided to set some limits to this stream:

I don't think usage will ever get close to those numbers.


Server-Sent Events is supported by most of the browsers.

Can I Use eventsource? Data on support for the eventsource feature across the major browsers from

In case you need support for other/older browsers you can use this polyfill.

If you want to dig a little bit more in Server-Sent Events maybe this post could be of your interest.