Audio player volume control interaction

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.