THE LAB / 001 · PV SOUNDCLOUD PLAYER
A custom SoundCloud player built to feel at home in my music catalogue.
Somewhere between redesigning the release pages and listening to the same track for the twentieth time, the default player started to feel like a guest who had brought their own furniture.
It did the job. But the artwork, typography and page layout spoke one language, and the embed spoke another. I wanted the listening experience to belong to the rest of the site. So I built a player of my own.
Let the music take the space.
The release artwork already has its place on the page. The player does not need to repeat it. Instead, the interface gives the track title, playback controls and progress room to breathe, using the same visual language as the surrounding catalogue.
The aim was simple: make pressing play feel like part of browsing the release.
One track. Or a whole little world.
A single needs very little: a title, play and pause, progress and time. An EP or album needs a way to see what comes next, choose a track and keep track of what is playing.
The player adapts to the SoundCloud embed attached to each release. Singles stay compact; multi-track releases reveal a generated tracklist, durations and previous/next controls. The active track stays visible as playback changes.
A different face. The same engine.
Underneath the custom interface, SoundCloud still handles playback through its official Widget API. HTML, CSS and vanilla JavaScript connect the controls to the existing embed, inside a reusable Bricks template.
That keeps the existing release workflow useful. The player reads what is already there, rather than asking for another manually maintained tracklist.
The original embed also stays available as a fallback. The custom interface appears once the API is ready; if loading or playback fails, the native player takes over. Releases using Audiomack keep their original embed.
Made for actual listening.
Play, pause, skip, seek, mute. Elapsed time, track duration and a clear active state. Small details, but together they turn an embedded widget into something that feels designed for the page.
This is a small, live piece of my music site ~ and a good excuse to bring interface design and code a little closer together.
DESIGN & BUILD · WORDPRESS / BRICKS · HTML / CSS / JAVASCRIPT · SOUNDCLOUD WIDGET API
