I enjoy listening to Code Radio while I'm working. The music helps me focus and block out the noise of the surrounding office.
But when one of my co-workers interrupts my flow to ask a question, I have to switch Code Radio off.
It's kind of time consuming to switch over to the Code Radio site to pause the music. You have to figure out which tab Code Radio is playing in so you can pause it.
To overcome this situation, I started opening a separate browser that I only used for playing Code Radio. This made it easier for me since I could just alt+tab back to that browser icon and press Code Radio's spacebar hotkey to pause the music.
But running a separate browser only for playing music felt like a drain on my computer resources. I thought there would be a better solution that wasn't so taxing.
Since, I started listening to Code Radio, I had largely abandoned Spotify and uninstalled the app. But I remembered how when I used to use Spotify, I was could use the media controls on my keyboard to pause and play the music. This got me thinking.
A more elegant solution
What if you could play and pause Code Radio with a single hotkey on your keyboard - even if you were in your terminal or your code editor?
Well you can't do that with a browser app. But you can do that with a native app running on your computer. And you may already have this app installed on your computer. It's called VLC, and it's one of the most common media players.
During my lunch break, I kept thinking on how to make it easy for myself to listen to music and have the ability to play/pause music from my keyboard with the click of a single button i.e. play/pause button. So, I searched in the internet and found out that media players can stream content from any network.
This article helped me understand how to stream content from any network in VLC.
In order to have the flexibility of using the play/pause button from my keyboard I had to use a media player. I found the VLC media player a reliable media player that is available in all platforms and it is open source and free to download.
In my first attempt, I tried to open the Code Radio website page URL: https://radio.freecodecamp.org in VLC media player.
And VLC media player could not play it. I tried pressing the play button multiple times, but it did not nothing.
After multiple trials, I found that VLC media player requires a music format file (e.g. mp3) and cannot parse the html website :/. the URL needs to be the location of the music format file.
So I went back to the Code Radio music website page and inspected the website page. I searched for "mp3" keyword and found nothing.
Then I noticed i did not hit the play button for the website to request for the mp3 file to be played. I just tried it (on Firefox), and I don't have to click enter to find the URL of those mp3s.
There are two bitrate options available on Code Radio music website page.
The mp3 files I saw in the inspect correspond to the bitrate option button.
The two bitrates and their file names:
- 64kbps - low.mp3
- 128kbps - radio.mp3
In my second attempt, I used the mp3 file location URL: https://coderadio-admin.freecodecamp.org/radio/8010/radio.mp3?1564340326 which I found in the Code Radio music page in the VLC media player. It started to play the music :).
I noticed the unique number at the end of the mp3 file "?1564340326". This seem to be unique values created by the back-end server. When I opened the VLC media player in the next day. It was unable to play the Code Radio music. I tried to delete the last values at the end of the mp3 file and it started to play again :).
Steps to play Code Radio music from VLC media player
Step 1. Open VLC media player. Then, click on File->Open Network
Step 2. In the URL field, paste this URL: https://coderadio-admin.freecodecamp.org/radio/8010/radio.mp3 . Then Click on the Open button.
Then, VLC media player will open the Code Radio network and start playing the music.
Note: You can use the URL: https://coderadio-admin.freecodecamp.org/radio/8010/radio.mp3 in any media player that supports streaming via Network. I tried to play on Quick Time player and it works!
Other option: Playing via playlist file,
Code radio is powered by AzuraCast and its public player has a "Download PLS" link that will produce a PLS playlist file and it contains all the different bitrates. The playlist file can be played in VLC media player and in other players.
You can open the playlist file - https://coderadio-admin.freecodecamp.org/public/coderadio/playlist/pls in VLC media player and choose the bitrate and start playing the music.
Enjoy listening to Code Radio music.
Credits: I thank Quincy Larson, Buster Neece and Louis Tsai for reviewing this article.