Introducing Plexamp
As we mentioned on the blog post introducing Plex Labs, one of the things we’re using Medium for is a venue for talking about awesome parts of the Plex ecosystem outside of the officially supported universe. This includes popular community projects, as well as passion projects from our own employees.
Today we’re going to be taking the wraps off one such project called Plexamp. It’s likely to appeal to anyone who uses, or has considered using, Plex for music. Built by a handful of people inside Plex in their spare time, it’s an homage to the past, a testbed for experimentation and play, and frankly, a way to learn fancy new JavaScript features.
Without further ado, we’ll turn it over to them for an introduction!
Small, powerful, beautiful (choose any three)
We love music. We love Plex. We thought we might combine those passions.
It all started over a beer — as most great things do — re-envisioning what a tiny and powerful music player might look like in 2017. The most classic and beloved small audio player, Winamp, was first released almost exactly TWENTY years ago. Written in a low-level language, it ran on Windows, and was limited to playing files on the local (or networked) filesystem.
Plex, on the other hand, provides a best-in-class client/server model, an extremely metadata rich library, is highly portable, and gives you access to your entire music collection from anywhere in the world; we wanted to pair this with a similarly excellent music player. Literally the only requirement we had was “small”; Plex has plenty of bigger apps already, but nothing that sits unobtrusively on a desktop, beguiling and delighting. We even forced ourselves to limit the design to a single simple window.
We quickly settled on Electron as a platform to build the app. The combination of ES7, Electron, React, and MobX quickly became an incredibly productive (and fun!) set of technologies to use. As for the actual audio player, we wanted to do things which weren’t easy or even possible with Web Audio, so we picked a feature rich, portable, open source audio player called Music Player Daemon (MPD).
It’s either amazing or crazy (probably a bit of both) that the app comprises multiple Electron processes, a player server process (for being remotely controlled), and the MPD player process, while managing to present a semblance of a whole. And ignoring the fact that it’s probably the smallest Plex player (by pixel size), it still has rich functionality!
Here’s a quick overview of the basic features for the app:
- Runs on macOS and Windows, and works like a native app (e.g. media keys for skipping tracks and toggling play/pause are supported, as are notifications).
- Direct plays just about any music format you could dream of throwing at it.
- Companion support: can be used to remote control other Plex players and can be remote controlled itself.
- Works in offline scenarios (e.g. on an airplane with server running on laptop, or on your private submarine).
Diving in a bit deeper, let’s explore some of the sexier features which make Plexamp unique:
- Global activation hotkey: Besides support for standard media keys, it offers a global activation hotkey much like Spotlight on macOS (cmd+shift+space). This makes it quicker than ever to find something in your music library. There are a number of additional nice keybindings for power users.
- Gapless playback: As anyone who owns Pink Floyd’s The Wall or any of the approximately 1,534 live Dave Matthews concert albums will tell you, this is a very important feature for a music player.
- Soft transitions: We really wanted to sweat the little details with Plexamp. Whenever you pause a track, instead of abruptly stopping, we do a quick little fade out, and then fade in again when resuming (we also do this when seeking and skipping). Subtle difference, but a sweet one. Want to know just how obsessive we are? Those three little animated bars which show the currently playing track in the play queue? That’s actually a working spectrum analyzer.
- Visualizers: What would a music player be without a fun set of visualizations to enjoy while you listen to your music? The technical details here are pretty insanely cool (we perform FFT with psychoacoustic tuning in the MPD process, and then ship timestamped data over to the app process via UDP) and we have built hosts for Canvas API and WebGL visualizers. Try ’em all and let us know your favorite!
- Album art key color extraction: We extract important colors from album artwork to use for various purposes (e.g. computing optimal opacity values for overlays, and providing a palette for the visualizers to use). Again, details matter.
Leveraging New Server Features
As mentioned earlier, one of the goals of the project was to have a testbed for experimentation and play. It can be a lot easier to do this when not in the context of an official app. As such, we ended up being able to make early use of a few up-and-coming features in the Plex Media Server which have been under development for a while. These features will end up becoming part of the Plex Pass premium music package, but as a Christmas present, we’re making them freely available for the next three months so you can play with them too!
The server team has been working on enhancing the media analysis engine for audio. They use the best-in-class EBU R128 algorithm to extract loudness data and enable a wide range of new features. Additionally, they’ve added some cool radio modes to allow you to experience your music in brand new ways.
We’ve made use of these new features to power the following functionality inside Plexamp:
- Loudness leveling: Using the loudness data, we can now normalize playback volume. This is most useful when playing tracks from different albums, but keeps things consistent across album playback as well. If you’re curious as to why this is needed, this page gives a good history. (This is commonly referred to as ReplayGain, and Plexamp uses the server-computed ReplayGain 2 values with -18 LUFS reference.)
- Smart transitions: As part of the loudness analysis, we compute the optimal overlap times between any two tracks, ensuring transitions are seamless. Combined with loudness leveling, this can provide unsurpassed listening “flow” across even widely different genres and styles. It’s seriously incredible.
- SoundPrints: We went looking to find a really cool way to represent a track visually, using loudness profile and key colors from the album artwork. We think we found one. If you end up getting a tattoo of your favorite track, please do let us know, we might even pay for it.
- Waveform seeking: Here we make use of the loudness data to provide a graphical view of the track, to allow easy seeking to specific places, like skipping over 10 minutes of silence to get to that hidden track. Also: please stop making hidden tracks, they’re annoying.
- Library stations: You’ve always been able to shuffle your entire library, but that’s not always the best way to explore it, and a completely random shuffle doesn’t take into account certain perceptual aspects of the experience. The new server radio station functionality uses advanced heuristics around track popularity, rating, and listening history. There are two library stations available:
- Library Radio: works across your entire library, in no particular order.
- Time Travel Radio: starts with earliest released music and works forward, to provide you with a whirlwind, genre-bending voyage through the history of music. We love starting our mornings with this (and coffee; lots of coffee).
- Artist radio: Each artist now provides an artist radio station which gives you a great way to kick off a playlist of similar music. As the station goes on, it explores more corners of your library, inspired by the starting point.
Bottom line: we’re music lovers. We’ve been using Plexamp over the last few months, and it’s brought lots of surprise and delight to the devs and dog-fooders alike. While it might still have a few rough edges, we think it may just show you some great new ways to experience your music collection. We’re incredibly excited to share it with you.
You can download Plexamp on the Plex Labs page; follow us on Twitter and Instagram via @plexamp. Hey, we also have a FAQ.
