Web Listening to Audio User Flow

Discover best website designs for Listening to Audio flows. Get inspired by the best apps in the world.

Listening to a meditationon
Calm

The user selects a meditation from the homepage, initiating playback. The user then views the meditation in full screen and continues listening.

Listening to Audio Browse & Discover Home Audio Player Badge Carousel Icon

Playing a playnoteon
PlayAI

The user views a PlayNote and then starts playing it. The UI updates to show the media player and a pause button.

Listening to Audio Audio Player Song & Podcast Detail Drawer

Listening to an articleon
WSJ

The user views an article and then starts listening to it using the embedded audio player. The audio player controls indicate the article is playing.

Listening to Audio Article Detail Audio Player Banner Button

YouTube Listening to an audio track screen

Listening to an audio trackon
YouTube

The user accesses the audio library, chooses a track, and starts playing it. The player controls are used to manage playback.

Listening to Audio Playlists Audio Player Banner Icon Search Bar

Listening to a talkon
Reddit

The user browses and joins a Reddit talk. They can then interact by raising their hand, reacting, sharing the link, or reporting the room.

Listening to Audio Loading Misc Loading Indicator Dialog Icon

Listening to an audioon
Apple

The user views an article and starts playing the embedded audio. The play button changes to a pause button to indicate the audio is playing.

Listening to Audio Audio Player

Duolingo Completing the first lesson screen

Completing the first lessonon
Duolingo

The user completes a lesson in the app, answering questions and reviewing mistakes. The user is then shown their progress, rewards, and streak, and is prompted to set a streak goal and create a profile.

Browsing Tutorial Listening to Audio Selecting & Choosing Audio Player Quiz Select Animation & Video Tile Coach Marks

Listening to responseon
Bard

The user prompts a chatbot for interview questions. The chatbot provides a detailed response which the user scrolls through.

Listening to Audio Chat Bot Loading Audio Player Floating Action Button Rating Control

Beginning a courseon
Headspace

The user selects a course, completes a session, views a summary, and then navigates to the next session or views course progress.

Listening to Audio Starting & Completing Class & Lesson Detail Select Loading Avatar Button Floating Action Button

Listening to a trackon
TIDAL

The user selects and plays a song from an artist page, then explores the full screen view, checking the queue, lyrics, and credits. The user scrolls to view more information.

Listening to Audio Other Content Audio Player Song & Podcast Detail Button Icon Stacked List