Please correct the errors below.
The player Learn and teach using sheet music synced with video Notation and tab editor Easily create interactive sheet music, for free Sheet music scanner Beta Turn PDFs and photos into interactive sheet music About Soundslice Here’s our story
Help Transcribe Embed Plans Community
Practice Teach Embed Transcribe Community Plans Help Store
Log in Sign up

Player settings panel redesign

Today we’ve launched a redesign of our player’s settings menu — the right-hand panel where you can change various aspects of your music.

Screenshot

Aside from giving it a new look, we’ve polished and simplified various bits to make things quicker and easier to find. Let’s dive in...

The visuals

Our settings panel has had a dark background ever since we launched our player in 2014 — just over 10 years ago! It was high time for a visual refresh. Here’s one last look at it:

Screenshot

Of course, we didn’t want to change just for change’s sake. We had two specific aesthetic goals:

  • Change the various controls to be simpler and more straightforward. As the settings panel has grown in functionality over the years, it had become complicated and full of bespoke interfaces that were harder to understand than necessary.
  • For people who embed Soundslice in their own websites, use a simpler color palette, so it fits better in a wide variety of contexts.

To address these goals, we changed the panel to use a much more muted color scheme (simple gray). And the panel now floats above the music instead of being flush against the edges of your web browser — a subtle change that makes it feel lighter.

Unified volume controls

Previously we had a separate volume panel, which had its own icon at the bottom of the player:

Screenshot

Aside from the main volume, this let you control the volume of individual instruments (in synth playback), plus volume of the metronome and synth overlay.

This worked OK, but it was inelegant in a few ways. First, the available options would change based on whether you were using synth playback or a real recording — and we had to add some awkward text to communicate why that was happening:

Screenshot

Second, it took up the whole width of the screen, which was kind of a bad use of space.

In our redesign, we’ve removed that volume panel entirely. The various volume controls now live in context where you’d expect to find them:

1. The master volume is at the top of the settings panel:

Screenshot

(To help people find this, note we’ve changed the icon for the settings panel to something that looks like an audio mixer.)

2. Instrument-specific volume (and synth sound) is also in the settings panel, in the Instruments section:

Screenshot

This unifies the instrument-specific display options with instrument-specific audio options. Everything’s neatly in one place.

3. Metronome volume is right below the metronome on/off button:

Screenshot

4. Synth overlay volume is directly below the synth overlay on/off button in settings (more on this below).

In theory, it was nice having all of the volumes in one place. But in practice, we find this new approach to be much more practical and nicer to use.

Improved Instruments section

The Instruments section now allows for setting volume and synth sound on a per-instrument basis (see above) — but, as always, per-instrument tweaks are only possible in synth playback, not with a real recording. To help people understand this, we wanted to make it easy to switch between synthetic and real audio directly from this section.

If you’re viewing a slice that has a real recording, you’ll see a quick way to switch between Recording and Synth, directly in the Instruments section:

Screenshot

If the slice has multiple real recordings, you’ll see an extra dropdown there, letting you switch between them:

Screenshot

The instrument-specific audio buttons will be disabled if you have a real recording active, and you’ll see a tooltip if you try to use them:

Screenshot

We hope this helps communicate the subtle differences between synth and real audio playback.

Each instrument name is now clickable to instantly focus on it:

Screenshot

This will automatically hide all other instruments’ notation and mute all other instruments’ synthetic playback. You can focus on multiple instruments at the same time, too.

Finally, the Instruments section also now includes a synth overlay toggle, for slices with synth overlay active:

Screenshot

This provides a second way for you to use this feature. The previous way (which we still support) is via the recordings menu at the bottom of the player:

Screenshot

Better organization of layout and stave width

Previously, the Layout section did a lot of heavy lifting. Aside from letting you select the layout, it let you set stave width and line break options:

Screenshot

Now, we’ve split this functionality into two sections:

Screenshot

Layout deals solely with layout, and stave width deals with width.

We’ve also added an explicit “Fit to screen” checkbox. Previously this was possible by moving the stave width slider all the way to the right; the new checkbox is much more discoverable.

Smaller tweaks

Rounding out the redesign, here’s what else is new:

  • The playhead style section no longer has a show/hide button for the advanced settings. The settings are always visible. (It’s not that much stuff, so the show/hide felt too heavy.)
  • The auto-saved settings section takes up much less space.
  • In the zoom level, stave width and transposition sections, we now display the current value at upper right. Previously this was only visible via a tooltip while you were interacting with the interface.
  • The size of our player (in terms of code your browser needs to load) has gone down a fair bit. The settings panel is lazily loaded, which means your browser won’t load that code until you actually use it.
  • If you’re a Licensing customer who has customized your embed colors: please note the settings colors have been hugely simplified. Your existing colors should continue to work well in context of the redesign, but please note that some of the old customizations are no longer relevant due to the simpler design. Feel free to tweak. Note we still need to update our documentation to remove the old customization choices.

We hope you like the redesign, and thanks as always for using Soundslice!

Comments

Ouaou ! Excellent travail ! Je viens de tester et le résultat est beaucoup plus esthétique et pratique ! Merci !
I much prefer the previous colour. Thank you anyway.
It's nice to see ongoing updates to SoundSlice. It's a great tool. I agree with Carlos, above, that the older color scheme had more contrast and that can make it quicker to find things while working. Maybe keep a 'dark theme' option? (Not sure 'refreshes' for no particular reason are functional for the user.)
I like the new layout, but I would like the option to switch the settings panel from light to dark.

Post a comment

Log in to post a comment.