When an audio-only player is embedded on a page, it can be set to very small dimensions — 44px tall and sometimes only a couple hundred pixels wide.
We wanted to come up with a way to keep the volume interaction completely inside of the bounds of the audio player control bar, while still respecting the rest of the elements around it — like the time slider.
On a mobile or touch device, the audio player volume button only sets on/off, and volume level is controlled by the device.
This is a prototype for a desktop player. When the user hovers on the volume icon, we toggle the focus to the volume slider, pushing the time slider to the right and out of view if necessary. When the user stops interacting with the volume control, the volume slider disappears and the time slider reappears from the right.
L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
© 2019 Dribbble. All rights reserved.
Almost Sold Out: Hang Time Workshops with Jon Contino, Danielle Evans, and MDS.
Minimum 6 characters
Uh oh… We’re still waiting for our spam prevention code to load.