VoKal Player

May 2020

Context

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).

Early design

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.

Design decision

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

Also read

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 !