I had a University project about building a distributed application. It had to stream audio or video and be able to control stream to client. As a regular WebRadio user, audio streaming is nothing alien to me. I decided to write a complex ecosystem around audio streaming.
This writing focus on the Client UI for the desktop (in JavaFX) and for android (in Java).
I decided to re-use AIMP’s efficient UI design for this task and quickly made a simple UI Mock.
JavaFX being one of my favorite desktop UI framework at the time, I decided to write my own AIMP-looking audio player.
After trying different way to play Audio on Windows from VLC library to WinAPI’s DirectSound, I finaly found that Un4seen BASS was excellent at playing audio stream. I quickly wrote a simple JavaFX application that loaded WebRadio streaming and played it almost magically !
After a few adjustments, I finally made a complete desktop player in javaFX that was really close to my initial UI Mock
Building a server-side remote
Next step was building a remote solution that would decide what client listen and how the audio stream would behave.
This simple Command-line interface allowed me to control the Audio Stream from a simple python script that communicated with both a Messaging Queue and a slightly customized IceCast server.
Integrating the remote on the client
Finally, I added the remote capacity on the Client Player and ended up not using the Command line interface anymore. Configuring the client to have special access, it was easy to stream the playlist and decide what to play next !
Making an android application
After learning that BASS got an Android version, I decided to make an android application with it ! It also had a “voice remote” option to ask for the next track, and some quick remote controls like previous or next track.
It was also possible for web clients to connect using the IceCast WebBrowser stream and simply listen to the stream without the remote control abilities.
Building an user documentation
One major step of this project for the Client-side was to create a complete documentation on how to use the player.
- This image explains how to play a track
- This image shows the Window controls
- This one explains how to read the track
If you’re interested in the back-end logic of this application, you can read about the Messaging Queue. I’ll soon write about the Flask-Admin dashboard where the tracks got managed and the streaming service. Stay tuned !
A better file listing
Frustrated from the Apache default index page, I decided to write a simple single file web app under constraints
Phaser web IDE
Building a PhaserJS IDE using reactive binding with Svelte and TypeScript object mapping from PhaserJS. The scenes are passed from CustomEvent and listed in Inspector view.
SVDX Midi Controller
A deep dive on how to use Midi controller on some rhythm game
Want more ?
I've got a lot of other awesome projectsSee them all !