Gallery
See what others have created
cooling_shopkeeper
@cooling_shopkeeper
Voice Message Player
Design a mobile chat bubble for a voice message. It sits inside a conversation thread and behaves like a message, not a standalone media player.
The bubble needs a clear play/pause control, a waveform or progress track, and a duration label. Playback state should be obvious without crowding the message list.
Treat the waveform as both a visual cue and a scrub target if you choose to support seeking. The control area has to work in one thumb, inside a dense chat layout.
Think through sent vs received styling, short vs long clips, and what the bubble looks like before, during, and after playback. It should feel native to messaging on mobile.
What to deliver
- Design the default voice message bubble in a chat thread
- Design play and pause states for the control
- Show waveform/progress styling for an unplayed and partially played message
- Include duration and playback time treatment
- Show sent and received bubble variants
Make the progress state readable even when the waveform is tiny: use a strong contrast fill or active segment so the played portion is obvious at a glance.