Add a Pop-Up Player to your site

Pop-Up Player Window: One Dummy’s Guide
Having no idea of how to build a web page from scratch, or how to use cPanel – but having a slight bit of knowledge about how html works – I managed to set up a player on a Torontocast-hosted web site and then create a button on my own website that opens the player page in a pop-up window.
For the benefit of others who don’t know much about web coding, I’ll try to explain my steps here. I’m sure there are better ways to do it, and it would be great if someone with more knowledge creates a better guide. But here goes--
 
In my case, my main web site is built on Google’s old Blogger platform. I can’t guarantee that the coding I used for the pop-up will work on all web-page-making systems.
As for the player, I used a free one from RCast.net. They offer several players and you just have to make a free account to get the embed code, which you’ll then want to copy into a text file and save. There are various other places to get free players, like muses.org, and most of you presumably already have a player that you favor.
NOTE: It happens that RCast also offers pop-up player options. You don’t want to use that, because once you put the player on your new TC-hosted site, you want it to stay there and play from there, not from an Rcast server. However, I also copied and saved the code for one of those, for reasons that will come up later.
ANOTHER NOTE (added 5/25): Based on another producer’s experience, it seems the RCast player will not show your title/artist metadata if you’re broadcasting on Icecast. In that case you’ll want to find another player. John Baxter has collected some options here: http://www.mandozineradio.com/broadcaster/players-icecast.html
 
So: I signed into my TC account, clicked Services/Order New Services, chose Starter web hosting, clicked “Use a subdomain from TorontoCast,” entered the promo code Socan on the checkout page, got my free account. (Note: At some point in the process, it gave me a choice of http or https; I chose https, the more secure option, which is more and more becoming the standard on the web.) The web hosting service now showed up in the Active Products/Services list on the TC client page, and I clicked that. On the next page I clicked Login to cPanel.
 
I had no idea what to do next! People who know such things could explain how to start assembling a web page by uploading files and such, but that’s not me. Down near the bottom of the page is a section called “Softaculous Apps Installer” and I clicked on WordPress because I’ve used that a little bit in the past. I went through the installation process (it’s quick). Once you do that, look under “Current Installations.” Ther’s a link for your TC site, and next to that an icon of a person, labeled Admin. Click that, and you come to the WordPress Dashboard. (Bookmark this page, so you don’t have to go through all these steps to find it again!)
WordPress is designed for creating blogs, but you can also create static pages. First you have to pick a theme for the website; I went with the most-basic one I saw, simply called Write. You’ll go through a few steps like giving the page a name (such as, your station name).
Back on the WordPress Dashboard, I clicked Pages/Add New, and a template opened up. There’s a space to give the page a title, and a window to enter text. Make sure that window is toggled to Text and not Visual. In Text mode you can put in HTML code.
After trial and error I found that before putting in code you should first push the button that says “code,” which generates a <code> tag in the window. After that tag, I simply pasted the embed code I got from RCast. You can put in the code for whatever player you prefer. At the end of it, hit the “code” button again, or just type in </code>, to close the tag.
 
I chose not to put anything in the Title window, to keep the page as minimal as possible, but that’s up to you. The next step is to click on Publish. It might look like nothing happened, but look for the words “View Page” near the top. Click there and see your result.
Now you can take the URL of that nifty new page and link to it from your own website. You could just make a simple text link that takes you to that page. Or if, like me, you want a visitor to be able to listen while staying on your website, you can set the link to open your TC page in a pop-up window.
There are various ways to do this, and I’m not sure if my method would work on all web-building platforms, so your results may vary. What I did was combine a bit of code I know for making a simple button with a bit of the code from the Rcast pop-up player that I copied but didn’t use (remember?).
So here’s the code that worked for me:
<a href="javascript:void(window.open('https://birchstreetradio.torontocast.stream/39-2/','player','scrollbars=yes,width=400,height=660,resizable=yes'))"><button type="button"><span ="" style="font-size:large;"><b>LISTEN IN POP-UP PLAYER</b></span><br /></button></a>
Obviously you would replace my URL with the one from the TC web page that you put your player on. You can tinker with things like the width and height to get the new window to appear the way you want. I chose width=400 height=660 because that created a window just about the right size for the particular player I used.
And you don’t need to make the link a button – The basic code to just link from text would be:
<a href="javascript:void(window.open('https://yoursite.torontocast.stream/your-page/','player','scrollbars=yes,width=400,height=660,resizable=yes'))">WHATEVER TEXT YOU LIKE GOES HERE </a>
 
If this doesn’t work on your website, you may be able to find pop-up window code on an HTML tutorial site such as w3schools.com.
Hope this helps!
  • 0 Users Found This Useful
Was this answer helpful?