Looking to run a radio station on the web? Maybe a Pandora clone, a Spotify hybrid, or perhaps you’ve got an idea that’s fresh and brand new? BitShuva lets you do that.
- If you’re a software developer, the instructions below will help you get started.
- Not a software developer? Contact me at
email@example.com, I can get it set up for you.
To get started with a station of your own, you’ll want to follow these steps:
- Download the source code via Git.
- Build the radio station using Visual Studio
- Add your own music and album art.
- Modify the look and feel of the station.
We’ll go over these steps below.
Download the source code
If you’re just playing around:
- Go to BitShuva source tab, and click download. This will download an offline copy of the code (i.e. your copy of the code won’t be updated as I make improvements to the code).
But if you’re serious about building a radio station, and you want to keep your source code up-to-date as bug fixes and features are added, you’ll want to use Git to get the latest code. On Windows, I recommend using
GitHub For Windows or just the Git command line. This will allow you to both get the source code and receive any changes and fixes I apply to the codebase.
Build the radio station
To build the radio station, you’ll need have Visual Studio 2012 installed. While it’s technically not a requirement (you can compile from the command line), the solution uses Visual Studio and some add-ins to build the station.
(Don’t have Visual Studio? You can use the free
Visual Studio Express 2012 For Web.)
Now that you’ve got Visual Studio installed and the source code downloaded, it’s time to build your first radio station.
In the source code, find BitShuva.sln. Open that file in Visual Studio.
Hit F5 to build and run the solution. VOILA! A local website will appear, hosting a dummy radio station and a few sample songs.
Adding your own music and album art
Now that you’ve got a basic radio station running, you’ll probably want to add your own music and album art.
To do this, with the radio station still running in the web browser, go to
/admin url. This will take you to the Admin page:
On this admin page, you can upload new music and album art, as well as view, edit, and delete existing songs.
Modifying the look & feel of the radio station
So you've built your own radio station, added your own music and album art? Now we're cooking.
Let’s shake things up a bit and customize the look and feel of your radio station.
Text and markup:
In Visual Studio (or any text editor, for that matter), open the file BitShuva\Views\Shared\_Layout.cshtml
This is the shared layout or master page for your website. In it, you'll find the HTML for the title and header, with names like "Foobar Radio". Change this as you see fit.
Finally, the bulk of the HTML for the application is found in \Views\Home\Index.cshtml. Crack that open in any text editor to make changes to the layout of the application.
\Content\Images\favicon.ico and \favicon.png. These are the favicons in the site used for web browser tabs and application installs. Replace these with your own favicon.
\Content\Images\logo.jpg This is the large logo displayed in the header of your radio station. Replace it with your own. If you want to change this logo's placement on the page, it's found in _Layout.cshtml
Feel free to replace all the images in this directory with your own versions; everything from the play button to the thumb up buttons can be customized with your own versions.
Colors and appearance:
\Content\css\Site.less contains all the CSS for the radio station.
Since It’s a less stylesheet, which Visual Studio doesn’t natively support, you’ll need to install the following prerequisite:
Web Essentials Visual Studio extension. Once installed, changes you make to the LESS file will be compiled to .css automatically on save.
Putting it on the web
If you’ve made it this far, congratulations! You have your own radio station, playing your music, with your album art, a custom look & feel, your own logo, favicon, images and colors – whew! You rock!
But right now your radio station is running only on your local machine. You want to share your creation with the world, right?
For that, you’ll need a web host running Windows IIS 6 or later, with .NET 4 or greater support. Share hosts work, but will result in some performance issues. Purchase a domain name, purchase a hosting package, and publish your radio station via FTP publishing
built into Visual Studio (Build –> Publish).
If you’d rather someone else take care of this step,
contact me. I provide cheap ($20/month) hosting. I register your domain name for free, I take care of backups and performance, while you focus on building awesome radio.
Want to change the way the station behaves? Maybe add a new feature? There are 2 main areas of the codebase:
On the client, \Scripts\bitshuva.mainviewmodel.js contains most of the application logic: showing songs in the UI, knowing when to play a song request, logic to react to user clicking "thumb up" on a song, and so forth.
On the server, \Controllers\SongsController.cs contains most of the server-side application logic, including logic for choosing which song the user should play based on his song likes and dislikes.
So crack those open and have fun!
Need help with a particular feature? Contact me, I can point you in the right direction, or if you prefer, code it up for you on the cheap.