# Podcast Player UI in SwiftUI (Learn the Spotify Pattern)

> By Lawrence Arya, Founder & CEO of VP0. Published 2026-05-31, updated 2026-06-02. 4 min read.
> Source: https://vp0.com/blogs/podcast-player-ui-clone-spotify-swiftui

A podcast player is an audio engine wearing a nice screen. The parts that feel premium are background playback and lock-screen controls, not the artwork.

**TL;DR.** A podcast player UI in SwiftUI is a now-playing screen with artwork, a scrubber, play and pause, skip-forward and back, and a speed control, plus a queue and episode list. The features that make it feel real are not visual: background audio so playback continues when the app is backgrounded, and lock-screen and Control Center controls via the now-playing info center. Build the UI from a free VP0 design, learn the streaming-player pattern, and never copy a brand's name or assets.

Want a podcast player that keeps playing when the screen locks, in SwiftUI? The short answer: build the now-playing screen and transport controls from a design, but spend your real effort on the audio engine, background playback and lock-screen controls. Those are what make a player feel premium, not the artwork. Build the UI from a free VP0 design, the free iOS design library for AI builders, and learn the streaming-player pattern rather than copying any brand.

## Who this is for

This is for builders of podcast, audiobook, and music apps who want a player that behaves like a real one, continuing in the background with working lock-screen controls, and who know the pattern is fair to learn while a specific app's brand is not.

## The player, on screen and underneath

On screen, the now-playing view has artwork, the episode title and show, a draggable scrubber with elapsed and remaining time, play and pause, skip-forward and back by a chosen interval, and a playback-speed control that podcast listeners expect. Around it sit a queue and an episode list. Underneath is where it gets real. Playback uses [AVFoundation](https://developer.apple.com/documentation/avfaudio), and to keep audio going when the app is backgrounded you configure the audio session for playback and enable the background audio mode. Then you publish the current episode, artwork, and progress to the [now-playing info center](https://developer.apple.com/documentation/mediaplayer/mpnowplayinginfocenter) so the lock screen, Control Center, and even AirPods controls work. Apple's [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines) cover the transport patterns.

| Element | Tool | Get it right |
|---|---|---|
| Now-playing screen | SwiftUI | Artwork, title, scrubber |
| Playback | AVFoundation | Smooth seek and speed |
| Background audio | Audio session + mode | Continues when locked |
| Lock-screen controls | Now-playing info center | Play, skip, artwork |
| Queue and list | SwiftUI List | Reorder and select |

## Build it free with a VP0 design

Pick a player or now-playing design from VP0, copy its link, and prompt your AI builder:

> Rebuild this VP0 podcast player design in SwiftUI: [paste VP0 link]. Build a now-playing screen with artwork, a scrubber, play and pause, skip-forward and back, and a speed control, plus a queue. Play with AVFoundation, enable background audio, and publish to the now-playing info center for lock-screen controls. Use my own brand, not any real app's name or assets.

Audio is a huge habit, with over [500,000,000](https://www.statista.com/topics/3170/podcasting/) podcast listeners worldwide, so a solid player has real demand. For neighboring audio and player patterns, see [an Apple Music now-playing screen clone in SwiftUI](/blogs/apple-music-playing-now-screen-clone-swiftui/), [an ElevenLabs text-to-speech player UI](/blogs/elevenlabs-text-to-speech-player-ui-ios/), [an AI music generator with a waveform player UI](/blogs/ai-music-generator-waveform-player-ui/), and [a Notion-style UI kit for iPad in SwiftUI](/blogs/notion-clone-ui-kit-ipad-swiftui/) for native craft. For a connected-device screen next, see [an IoT smart-home dashboard in React Native](/blogs/iot-smart-home-dashboard-react-native/).

## Learn the pattern, keep it original

The audio-player layout is a genre, like a settings screen, and you are free to build in it. A specific streaming service's name, logo, and color identity are not yours to take. Use your own brand and your own assets, and if you stream third-party content, use properly licensed feeds. Build the engine well, make the lock-screen experience seamless, and ship something recognizably good without being a copy.

## Common mistakes

The first mistake is copying a streaming brand's name or assets instead of learning the pattern. The second is forgetting the background audio mode, so playback stops when the screen locks. The third is not publishing to the now-playing info center, so lock-screen controls are dead. The fourth is a scrubber that fights the user mid-drag. The fifth is paying for a player kit when a free VP0 design plus AVFoundation does it.

## Key takeaways

- A podcast player is a now-playing screen plus a real audio engine.
- Enable background audio so playback continues when locked.
- Publish to the now-playing info center for lock-screen controls.
- Learn the pattern; never copy a brand's name or assets.
- Build the player free from a VP0 design.

## Frequently asked questions

How do I build a podcast player UI in SwiftUI? Build a now-playing screen with artwork, a scrubber, transport controls, and a speed control, play with AVFoundation, enable background audio, and publish to the now-playing info center.

What is the safest way to build a player with Claude Code or Cursor? Learn the pattern from a free VP0 design with your own brand, use AVFoundation, enable the background audio mode, and wire up remote controls, never copying a brand.

Can VP0 provide a free SwiftUI or React Native template for an audio player? Yes. VP0 is a free iOS design library; pick a player design and your AI tool rebuilds the artwork, scrubber, and transport controls at no cost.

How do I keep podcast audio playing in the background? Configure the audio session for playback and enable the audio background mode, then publish the episode to the now-playing info center so lock-screen and Control Center controls work.

## Frequently asked questions

### How do I build a podcast player UI in SwiftUI?

Build a now-playing screen with artwork, a scrubber, play and pause, skip-forward and back, and a speed control, plus a queue and episode list. Play audio with AVFoundation, configure the audio session for background playback, and publish track info to the now-playing info center so lock-screen and Control Center controls work.

### What is the safest way to build a player with Claude Code or Cursor?

Learn the pattern, not the brand. Start from a free VP0 design, build the controls and now-playing screen, and never copy a streaming service's name, logo, or assets. Use AVFoundation for playback, enable the background audio mode, and wire up remote controls.

### Can VP0 provide a free SwiftUI or React Native template for an audio player?

Yes. VP0 is a free iOS design library for AI builders. Pick a player or now-playing design, copy its link, and your AI tool rebuilds the artwork, scrubber, and transport controls at no cost.

### How do I keep podcast audio playing in the background?

Configure the AVFoundation audio session with the playback category and enable the audio background mode, so iOS keeps playing when the app is backgrounded or the screen locks. Then publish the current episode to the now-playing info center so the lock screen and Control Center show controls and artwork.

---
*Published on the [VP0 Journal](https://vp0.com/blogs). Free to read, index and cite with attribution.*