Introducing the new ListenBrainz player

ListenBrainz
#1

Hello everyone!

We’ve been working hard to improve the music playing experience on ListenBrainz, and that starts with redesigning the music player.
We were unhappy with the limitations of having to place the player on the page, and with the size it occupied.
Using it on mobile devices also left to be desired.

With that in mind I’m happy to present the new BrainzPlayer, which you can see in action on beta.listenbrainz.org
We welcome any feedback you might have or any bugs you might encounter.

image
image2560×1404 256 KB

One detail I didn’t want to compromise on is being able to see more than a thumbnail of cover art. When playing a track, hover over the cover art or video in the bottom left to pop open a bigger view:

image
image1920×1065 85.9 KB

This redesign also allowed us to repurpose the space freed up on some pages to display more useful information:

image
image1548×1016 84 KB

This is only a first step in a series of design and layout improvements.
In particular for BrainzPlayer, our goal is to enable showing more metadata about the currently playing song and artist, including ways to support the artist.

We also started working on adding the ability to tag your music (genres, moods, etc.) in MusicBrainz straight from BrainzPlayer.
This in turn will allow us down the line to improve music recommendations based on user-provided tagging.

7 Likes
#2

This is looking really nice, thank you.

One request: Can we get a thousand’s comma separator for the listen count?

4 Likes
#3

What would of course be awesome would be if the player would survive navigation within the site. But maybe at least warn when trying to leave the page with the player if playback is active. More than once I accidentally navigated away just to have my playback interrupted :smiley:

6 Likes
#4

Paused videos unfortunately don’t look that nice in the mini player:
image

and since on mobile you can’t really hover the video is always mini. Tapping on it opens the YouTube app/website instead.

1 Like
#5

This new player is step 1 of n in getting this to work! Watch this space…

2 Likes
#6

Yes, another project coming up is to make the website a single-page application, so that navigating won’t load a new page (of course we’ll preserve browser navigation history etc.)

I’ll think about adding a warning on closing; ideally it would be a setting users can choose, and we’re just starting to think about how to store user preferences, so that’s a good candidate.

– EDIT: Woops, just saw alastair’s response now.

3 Likes
#7

Thanks, I didn’t realize that.

It turns out that Youtube requires that the video be showed on the page at a minimum size (bigger than current thumbnail size), so we were going to display the video above the player in either corner, without the need to hover whenever playing from Youtube.
I think that will solve the issue you mention.

1 Like
#8

The new player has been rolled out in production.

The code is out for the improvement suggestions in this thread so far and pending review and deployment:

EDIT: This is now deployed in production

3 Likes