Podcast Player UI in SwiftUI (Learn the Spotify Pattern)

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, 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 so the lock screen, Control Center, and even AirPods controls work. Apple’s 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 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, an ElevenLabs text-to-speech player UI, an AI music generator with a waveform player UI, and a Notion-style UI kit for iPad in SwiftUI for native craft. For a connected-device screen next, see an IoT smart-home dashboard in 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.