Building a Music Player GUI Application with Python

So I searched the whole internet on how to create a simple music player GUI app like Windows media player but every single tutorial that I found turned out to be about developing rubbish GUI (unless Visual Studio is used) especially using displeasing GUI libraries like Python’s Tkinter. And most of the other modules I researched about included a little too much advanced OOP and lengthy code. So as I needed elegant UI and was too lazy to install Visual Studio I decided to only create a front-end for a music player using HTML, CSS and JavaScript.

As soon as I finished styling the webpage I came across a helpful Python module named Eel. Eel enables you to create your GUI as a webpage and write Python code as a back-end to a web application, similar to Electron.js with Node.js, And execute the Python script as a desktop application. Now, this approach is not suitable for high level GUI applications with so much back-end code, but for stupid purposes like mine, it is the ideal.

So I imported the Eel module using pip, So I can design the appearance of my GUI app using HTML and CSS at ease.

pip install eel

To play music however, I imported the Pygame module, since plain JavaScript doesn’t have access to the file system.

pip install pygame

And I already had the index.html page and style.css files configured according to my preference. It is a good measure to make your web elements responsive so you will be able to adjust the window size from the Python script.

The HTML template for the GUI of the app styled using CSS

Next I created a separate folder named “web” to include my front-end and a python script with a preferred name.

I call my project Rizumu, which translates to “ Rhythm” in Japanese

My project structure in Visual Studio Code

The way Eel works is that it treats your app like a web application, similar to Flask or Django, and hosts it locally when you execute the Python script. So as the foundation you must contain the following lines of code in your script for Eel to host your app locally and render the application in a Chrome window.

import eel
eel.init('web')
eel.start("index.html")

And also you must include the following line in your HTML head.

<script type="text/javascript" src="/eel.js"></script>

After doing this and running the script, Eel will automatically find the index.html file in the web folder and host it on port 8000 by default.

I added a function to initialize the Pygame mixer and load the mp3 file names to a Python list. I also introduced a global integer i to keep track of the song currently playing.

Next I added functions in Python to play, pause and skip between songs because our player (Pygame mixer) runs on the Python side. Note how I used the decorator @eel.expose which enables me to call that function on the Web page side using JavaScript. Also the rename() function is similarly implemented on the JavaScript side and I’ve enabled it to be called from the Python side (Python calls this function by passing in a string and JavaScript on the other side uses that string to insert the title of the song into a h1 tag)

And the corresponding JavaScript side would look like the following. I included it straight into my HTML head as there is nothing much to be implemented.

And finally we have to configure a way to constantly listen to the mixer and notice when the current song is over. This was the hard part for me to figure out because there is not much you can easily do with Eel to be honest, besides calling functions from either sides. There is no “main loop”, and it also causes trouble when handling multiple threads since JavaScript is single-threaded. The way through this is to pass in a certain argument (block=False) to your eel.start() function to keep the Python script running even after rendering the page. This must be done in the following way using an infinite loop and a sleep() function. Make sure you use eel.sleep() and not time.sleep().

And that’s it! You can set-up the dimensions of your window by passing it in as arguments to the eel.start() function or by simple resizing it with your cursor after the web page renders (Eel will keep this in memory). One more thing, you can turn your project into a executable binary file using PyInstaller module and running the following command.

python -m eel [main_script_file] [static_web_folder]

This is just a fun project I was working on because I was bored at the moment but Eel helped me to simply use my web page development skills to create appealing GUI instead of taking lengthy OOP approaches.

The full introduction and walkthrough for Eel module can be found in this Github repository, make sure you head there, read it and contribute. And thanks for reading!