MousikóFídi: My Music Cloud
A web application that will serve audio and video files over HTTP, and is usable on viewports of all sizes. MousikóFídi is something I made for myself, but it is dedicated to all music-lovers of the world. Read on to find out more about what it is, and why I made it.
→ What, Now?
If you're not familiar, I'm talking about a music and video player that works in your web browser! The software runs on some server, be it a local machine where your collection lives or something else, and any device with a modern web browser can open a URL and begin enjoying audio and/or video. 1
MousikoFidi is such a web-based music player that can load your collection from a directory structure automatically, without any need for a database, and it has a responsive user interface that looks great on mobile devices.
→ Why?
I had been a user of Ampache since around 2009; I just loved the idea of streaming my personal collection through a web browser! I would continue to use Ampache for nearly ten more years, it served me well and continues to be great software.
The initial urge to make "an Ampache clone" came after reading Drew DeVault talk about using Flask to make Sourcehut. 2 I was no stranger to web development with Python, but I never really made a "real" application with Flask. I'd used Django quite a bit, as well as a bit of Bottle.py, but no Flask.
A little over two years ago, I began cycling regularly. I often liked to listen to music on my phone as it was strapped to my arm, speaker pointed towards my head. Who doesn't love some nice tunes during a workout? Of course it struck me to use Ampache during these rides, via the Power Ampache app for Android.
For whatever reason, I would have consistent issues with Power Ampache not continuing playback when a track ended. It was bad enough that I stopped using it altogether, choosing instead to load up my device with audio files from my collection. This worked fine for a while but is inflexible for someone like me who doesn't have any Google "apps" or any connection to "the cloud" from my device; I have to connect my device via USB, and use adb from my computer to move files onto the device. 3
→ Do It Yourself
Faced with this, I did what most folks probably wouldn't do: I decided I wanted to write my own web-based music player application. But I wouldn't actually start work on MousikóFídi for almost another year.
When I finally did begin work, I had taken a few weeks off from my day job but made no specific plans. That morphed into "hack furiously on some Javascript and Python", though! Within a few weeks I'd have a reasonably usable prototype, and it would finally dawn on me just how much more work was ahead of me to get things really fleshed out.
I had a few specific goals in mind for the "base functionality" of MousikóFídi:
- Play my collection through a web browser. I wanted browsing my collection to feel like I'm just browsing folders on my filesystem, since it's already highly organized.
-
Leverage the built-in
<audio>and<video>elements to handle playback. - A relational (or no sql) database is not reqiured; MousikóFídi should just be pointed at some directories and read files within.
- Simple installation; similar softwares have complex installation and setup processes. MousikóFídi can be ran and viewed immediately after installation with one command. 4
- All "Vanilla Javascript;" this may sound crazy to some, but it actually has been the most enjoyable part of the project for me. I've learned just how powerful Javascript can be without any frameworks or extra stuff. Yes, I've had to reinvent the wheel here and there, but overall the effort does benefit the project in more ways than just a small page size! 5
- Be "fast;" of course, reading files on demand with no caching does take time. If you open a page with 200+ files, it could take up to several seconds to fully load. From my perspective this is an acceptible performance cost, and down the road MousikóFídi can be extended in ways that would alleviate or eliminate this performance bottleneck (see below). But all of that considered, MousikóFídi is pretty fast with a small base page size.
- The UI should properly scale on different-sized viewports; other similar softwares all require an "app" to be usable on mobile devices and the like. MousikóFídi's user interface will adjust as needed and still look good, even on devices with small screens.
I didn't actually plan all of this from the start, though. It all sort of began with me implementing things that just felt or seemed right ("furiously hacking", as I mentioned before). 6
→ What Can It Do?
If you've read this far, you deserve some explanation of what MousikóFídi can actually do. Here's a quick run-down of features I didn't already go over:
- PWA Support; install MousikóFídi like an "app"! Offline mode is not supported. 7
- Share links to specific tracks at specific times.
- Keyboard controls for the audio and video players.
- Build playlists while browsing, save them to a file and then load them from that file as needed.
- Click the "Now Playing:" title of a track on the player to jump to that track on the page.
- Breadcrumb links that focus the page based on where you clicked from, and more.
- And of course, it can play audio and video files from your collection!
I wasn't specifically looking to match all functionality provided by other softwares like MousikóFídi right away, but I do want to close some functionality gaps where it makes sense.
→ The Future
Of course you can always do more, and although with the coming "1.0" release I do consider the core of MousikóFídi to be "feature-complete," I'm looking forward to adding new functionality. This includes but is not limited to:
- Support more media types. My own collection is almost entirely FLAC and MP3, with a very small amount of OGG Vorbis files. It'd be good to add support for other media types as well.
- A plugins framework, to provide a nice API for extending MousikóFídi.
- Database support (via an optional plugin).
- User accounts (authentication, also via an optional plugin).
- A fully custom media player.
- Some kind of beets plugin for scraping metadata (another optional plugin).
- A "dynamic" UI that doesn't actually reload the page while browsing, to allow for browsing while listening/viewing.
- Who knows what else. Have an idea? Found a bug? Submit an issue for it!
Want to try MousikóFídi? Please check out the demo!
Last but not least: if you're interested in the development of MousikóFídi, please consider subscribing to the mailing list.
Thank you for reading!
→ Footnotes And References
1 By "modern", I mean having usable <audio> and <video> elements and supporting newer ECMAScript features.
2 As I understand it, at least a few of those components have since been rewritten in golang!
3 For the curious: I'm using LineageOS with FDroid as my only source for software. No Google, no way!
4 Running it in "production mode" is also arguably more simple than with similar software; the Nginx config is little more than a proxy_pass definition.
5 Noteably, many things that are syntactically concise when using for example, jQuery, are a bit (to a lot) more involved. Also, coming up with a crude but simple method for stopping asynchronous functions mid-execution was a fun bit of research. For the curious.
6 Nowadays I do keep an org-roam document with my notes for MousikóFídi; I've got development plans for all the way out to version 4.0!
7 A huge thank-you to Cadence on Sourcehut for suggesting this feature!