Project File / 02
Product + Creative CodeTry to
skip it.
Give It a Listen
A p5.js music player that won’t let you skip. The skip button runs away, the player talks back, and after five tries the only thing left to do is listen.
01 / The Idea
We skip before
the song gets good.
Most songs get a few seconds to make their case. The skip button is always one tap away, so a lot of tracks never make it past the intro.
I wanted to build a player that pushes back, with a sense of humor, and asks you to stay long enough to hear the part you would have missed. [One line on the class or prompt this started from.]
Feel familiar
Look and behave like the music apps people already use.
Push back
Make skipping harder, with humor instead of punishment.
Reward listening
Keep the preview playing long enough to reach the good part.
02 / Wireframes
From sketch
to screen.
Lo-fi sketches map the flow (search, pick a song, try to skip, blend) and what each screen needs. The skip button is marked as the trap from the start.
Grayscale wireframes then pin down the exact layout on the 400 × 900 canvas, with real copy and every state. Those positions carry straight into the p5.js code.
03 / Interface
Familiar enough
to trust.
The joke only lands if the player feels normal. I borrowed the vocabulary people already know from streaming apps: a dark interface, one pink accent, big artwork, and a mini-player that follows you home. Nothing looks suspicious until you reach for skip.
Everything is drawn in p5.js on a 400 × 900 canvas: icons, cards, hit areas and every state. Real HTML elements appear only where the browser does it better, in the search field and the sliders.
04 / The Skip Button
Five tries,
then it locks.
Every time you reach for skip, it hops just out of reach, first to one side of its spot and then the other, and the player talks back.
On the fifth try the controls disappear, the preview starts over, and the only thing left to do is listen.
“No more skipping. Give it a listen.”
Skip Attempts / How It Escalates
- 01Hop away
“Wait. You haven’t heard the best part.”
- 02Hop back
“You sure you want to skip?”
- 03Again
“You sure you want to skip?”
- 04Last warning
“Maybe give this song a chance.”
- 05Locked
Controls hide and the preview plays through.
05 / Blend
Two songs,
one volume.
Blend layers a second preview on top of the first. The volume slider still decides how loud everything is, and the blend slider decides how that volume is shared.
Slide right and song one fades out as song two comes in.
Blend / How the Volume Is Shared
- Song 1
- Song 2
Song 1 = volume × (1 − blend) · Song 2 = volume × blend
At 70% volume and a 50/50 blend, each song plays at 35%, so the mix never gets louder than one song alone.
06 / Build
Real music,
real constraints.
Working with a live catalog meant designing for things I couldn’t control.
30-second previews
iTunes only serves short clips, so the whole experience is built around one preview: a progress bar you can click, a restart, and a clear message when it ends.
Search without a server
Results come back through a JSONP callback, so the sketch searches the iTunes catalog straight from the browser. Songs without a preview are filtered out before they reach the list.
Artwork that can fail
Covers load after the song opens. If one is slow or missing, a record-style placeholder holds the space, and a late image never lands on the wrong song.
Two clips, two lengths
Blended previews rarely end together. The player waits for both to finish before resetting, and seeking moves both clips to the same point.
07 / What I Took with Me
The punchline is
in the details.
Building this in p5.js meant drawing every icon, hit area and state by hand, which made me think about interaction at the level of pixels and milliseconds.
The skip gag is the headline, but most of the work was making everything around it behave: a disabled search while results load, messages that explain what just happened, and a player that recovers when audio fails.
My next step would be a keyboard path for the skip challenge, real album art on the home cards, and testing whether people actually listen longer, or just laugh and leave.
Live Sketch / Try It
Think you can skip it?
Open the live sketch and find out. Previews are courtesy of iTunes.
Play the Live Sketch ↗