Metrology is a practical series of app customizations and redesigns aimed at bringing a bold, clear, and consistent user experience to various Windows and Android apps. Its design language is based on Metro and Fluent design systems pioneered by Microsoft Design since the 2010s.
MusicBee is a highly customizable audiophile-grade music player for Windows. This is a skin for the Theater Mode, which displays the currently playing track in a large or full screen format.
There are 6 skins in development:
Zune: A detailed and accurate replica of the Zune/WP7 Music user interface.
Fluent Carousel: A striking perspective view for showing the next 10 tracks.
Fluent: A bold and clean UI that fits well with Windows 10. Optionally, a lo-res (100% scaling on Windows 10) and a 4K fullscreen version are available.
Fluent Wall: A beautiful display of the next dozens of tracks on a grid backdrop.
Metro: A wall of text for your wall of sound. Resembles early promos of the Metro design system.
- Download the latest release here: https://github.com/Madelena/Metrology-for-Musicbee/releases
- Extract the zip file and you will find a bunch of xml files. Each xml file is a Theater Mode skin.
- Go to C:\Program Files (x86)\MusicBee\Plugins or where you installed MusicBee. In the Plugins folder, you will find two TheaterMode folders.
- Copy the xml files to TheaterMode.Embeded, if you want to use the Theater Mode in the Now Playing tab or in the Compact View window,
- Copy the xml files to TheaterMode.List, if you want to use the Theater Mode as a full screen window or its own window.
The end result should look something like this:
IMPORTANT: Remember to add the XML file as a Theater Mode Skin, not a normal Skin! Look for the right folder! If you make the mistake of installing as a normal Skin under the Skins folder, your MusicBee will crash hard.
If you're a first-timer on MusicBee, you will realize that the app can be difficult to learn initially, mainly because its navigation methods are quite old school and rather different from contemporary music players such as Spotify. However, once you get a hang of it, you can customize it exactly to your liking.
There are 3 ways to use Theater Mode on MusicBee.
The Now Playing tab fills the entire window with information about the now playing track. By default, the Now Playing tab should be visible. You can switch the view to Metrology with the header menu hidden at the top left on the text that says "Now Playing":
You can fill the entire screen up with Metrology, by selecting it on the View > Theater Mode menu:
The Compact Player view floats the music player in a small window. You can access Compact Player from the View menu:
And then switch to Metrology with the main menu on the Compact Player window:
To exit Compact Player, click Maximize (the square button) at the top right of the window.
In a few skins, the player controls are hidden from view for aesthetics. To reveal them, move your cursor over the bottom right area where the UP NEXT track description is:
The buttons are pretty straightforward. Here's what they do from left to right:
- Previous Track button
- Play / Pause button
- Next Track button
- Search button: Opens up the "Now Playing Assistant", which allows you to search for a different track to play quickly.
- More button: Reveals the music queue, lyrics, and artist biography.
In some Fluent skins, the album cover can be resized to reveal a larger album cover more player controls (Progress Bar, Last.fm Love button, Shuffle and Repeat buttons):
- MusicBee 3.x
- Windows 10 with the Segoe MDL2 Assets font. Without it all the icons won't work. If you aren't on Windows 10 1903 or later, download the font here: https://aka.ms/SegoeFonts
- 1080p screen resolution minimum and 150% window scaling unless otherwise stated. The special 4K version needs a 4K screen.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Additionally, I would appreciate proper credits back to me if redistributed or modified. That would help my livelihood since design is my career.
The initial code was partially based on the Rdio Theater Mode view.