Search code examples
javascriptphpshoutcastinternet-radio

Have a shoutcast player continue to play while browsing website

I have been working on a website for something that would have a javascript based ShoutCast radio player. Here is the code that would be on each page's index file.

 <!-- BEGINS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->
<script type="text/javascript" src="https://hosted.muses.org/mrp.js"></script>
<script type="text/javascript">
MRP.insert({
'url':'Example.radiolink.com',
'codec':'mp3',
'volume':100,
'autoplay':false,
'buffering':5,
'title':'Example',
'welcome':'Test',
'bgcolor':'#FFFFFF',
'skin':'mcclean',
'width':180,
'height':60
});
</script>
<!-- ENDS: AUTO-GENERATED MUSES RADIO PLAYER CODE -->

How could I make it so this could remain playing while browsing each seperate php/html file. For example, currently if you switch page, while loading the player will pause for a few seconds and then continue after the next page loads. I have seen a few websites have this working without running off a single index file. I was wondering how to do this.

Thanks in advance, Kevin.

Solution

  • Simple answer - you can't. When the user leaves the page, the script is stopped.

    However, there's ways to work around that - some ideas:

    • Have the URL never change, and do all interaction & browsing with JavaScript (AJAX). It's not easy, but most websites that do something like what you want do it this way.
    • Use frames / iframes. This is an old-fashioned solution, but would do the trick. Change only the frame with content, and the player stays playing in another frame or the outer page.

    Note - you can change URL in the browser nav bar using the History API - so people will feel like they go to different page and can eg. bookmark it, while really staying on the same one.