The Secret

Any sufficiently advanced technology is indistinguishable from magic.

Arthur C. Clarke

Having your stream keep on playing, even when a user is navigating pages on your website, might seem like some kind of magic, voodoo or witchcraft but there's nothing mystical about it: there's just a little secret word nobody has told you yet.

The Secret Word is PJAX

PJAX = Push State Asynchronous JavaScript And XML

PJAX enables seamless page transitions by requesting the next page's content from the website's back end; it then updates the page with the new content, and updates the address bar with the new URL. This saves on full page loads, makes your site feel much faster, and allows your stream to keep on playing when your visitors browse your site.

It's JavaScript but it feels like magic!

Visit the jQuery PJAX Plugin Homepage

If you can understand PJAX you've found the diamond of information needed: you are now armed to go and build the rest yourself.

If you want to learn how to build a stream player from the ground up, see my tutorial called "How to control the <audio> tag"; this also explains how to get the latest now playing metadata from your stream, and how to display album artwork from Last.FM on your site:

Can't be bothered coding? Want the files?

I get that writing a site from the ground up is a pretty substantial undertaking, in other words, I know many of you can't be bothered so I'm sharing the code you need to create your station's site. It's a basic template with a stream player and album artwork built in, plus it's free.

Next: Free Radio Station Website Builder

© 2020 Andy Moore Privacy Policy Terms and Conditions