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.
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.
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
<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
- 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
<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!
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.
7 A huge thank-you to Cadence on Sourcehut for suggesting this feature!