--- title: "Player | GoodBarber's Design System" description: "The Player element plays audio, like a podcast, from its cell in GoodBarber apps: play and pause, and a timer showing the duration, progress or time left." canonical_url: "https://www.goodbarber.com/uxdesign/player/" lang: de --- # Player | GoodBarber's Design System [Design System](https://de.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://de.goodbarber.com/uxdesign/](https://de.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://de.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Player UI Elements The Player is the control that plays audio right from its cell: play, pause, and a timer that follows playback. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/player.0b3638d740ad.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/player.0b3638d740ad.mp4) ## Introduction The Player is the playback control of cells that display audio content, such as podcasts: it lets users start the audio right from the cell, without opening a detail view. It is a control, not a marker: the icon that only signals playable media, without controlling it, is the [Play](/uxdesign/play/). The Player stays in sync with the app's audio player: starting a sound from a cell opens the mini-player, and the two keep reflecting each other during playback. ## Anatomy ### The icon and the timer The Player is a play or pause [icon](/uxdesign/icons/) and a timer, side by side. The icon carries the interaction; the timer tells how long the episode is, and follows playback once it has started. ![The icon and the timer, side by side](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Anatomy-Structure.5ef12c68ffe2.png) *The icon and the timer, side by side* ## Properties ### Two variants The Player can be displayed in two modes. In the first, it sits in a dedicated [background](/uxdesign/background/) block, which makes it visually distinct. In the second, it is integrated directly into the interface, without any background separation: the icon lives in a small badge of its own, and that badge is always round. ![On a background block, and integrated without one](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Properties-Variants.ecb484fbc6b2.png) *On a background block, and integrated without one* ### Shape On the variant with a background, the [Shape](/uxdesign/atom-shape/) atom applies to the block, from Sharp to Round, and in Round, the block becomes a pill. On the variant without a background, the badge of the icon stays a circle whatever the shape of the app. ![Sharp, Rounded and Round on the block: in Round, it becomes a pill](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Properties-Shape.c79ce7d0536d.png) *Sharp, Rounded and Round on the block: in Round, it becomes a pill* ### Color The play icon and the pause icon each have their own [color](/uxdesign/atom-color/), and so does the timer. On the variant with a background, the color of the block can be customized too. ![The icons and the timer on the chosen color](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Properties-Colors.f847e5939e46.png) *The icons and the timer on the chosen color* ### Background On the variant with a [background](/uxdesign/background/), the block is black at 50% opacity with a [blur](/uxdesign/atom-blur/) by default, like the [Play](/uxdesign/play/): the icon and the timer stay readable over any picture, and what is underneath shows through, out of focus. ![Black at 50% with a blur: what is underneath shows through, out of focus](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Properties-Background.7ceb6a735e68.png) *Black at 50% with a blur: what is underneath shows through, out of focus* ## Layout ### Size and spacing These values are identical from one device to another. On the variant with a background, the icon sits in a 24px frame, 2px from the timer, and the block wraps them with 4px above and below, 8px on the left, 12px on the right. On the variant without a background, no additional padding applies, and the gap between the icon and the timer grows to 8px. By default, the timer is written in the system font, at 13px. Its [font](/uxdesign/atom-font/) can be customized. ![The paddings of the block, the icon frame, and the two gaps](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Layout-Size.f0daacdb9655.png) *The paddings of the block, the icon frame, and the two gaps* ### Placement The Player's place depends on its variant: with its background, it anchors in the bottom-left corner of the [media](/uxdesign/media/); without it, it sits at the bottom of the cell, on the left, on the same row as the actions. ![With its background, on the media; without it, at the bottom of the cell](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Layout-Placement.ffcfc78ec137.png) *With its background, on the media; without it, at the bottom of the cell* ## Behavior ### The timer By default, the timer displays the total duration of the episode, in minutes and seconds only when the podcast is shorter than an hour. While the sound plays, it shows the progress of the audio, in real time. And when an episode has been partly listened to and is not the active one, the timer shows the remaining time instead: 1h12 left, 12 min left, 42s left. Once an episode has been listened to almost to the end, the timer goes back to the total duration. ![The total duration, the live progress, and the remaining time](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Behavior-Timer.f0437f49f2f0.png) *The total duration, the live progress, and the remaining time* ### Play and pause When the sound is not playing, a tap on the Player launches it and opens the mini-player. When it is playing, a tap pauses it and updates the mini-player. The cell and the mini-player stay in sync. Whether users pause or resume from either side, switch tracks, move the progress bar or close the mini-player, the timer of the cell always reflects the current state. ### When playback is not available Playback can be unavailable: paid content, a file error, a missing audio source, or, in the Favorites, an episode still downloading. The Player is then disabled: the timer shows the duration grayed out, or --:-- when the duration itself is unknown. ![The disabled Player, grayed out: with its duration, or --:-- when it is unknown](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Player-Behavior-Disabled.af9488a5241c.png) *The disabled Player, grayed out: with its duration, or --:-- when it is unknown*