Music player

Build with Vlak
Personal collectionLocal listening session23 tracks

Saved tracks

Playlist
23 tracksFull track
Selected recording

Fortress Down

LoatheMetal

A Stranger To You album artworkA Stranger To You
Local audioAttach your own file for continuous queue playback.
30-second previewProvided courtesy of iTunes
70%
Get it on iTunes StoreListen to the full trackLoathe · Fortress Down
Up next

Your queue

Shuffle and repeat apply to attached files.

Choose a track, then play its preview.01 / 23

Choose a track → listen to its preview or local audio → arrange the queue

View source

Inside the interface

A focused player built around a hand-picked 23-track playlist. Browse the library, select a track, inspect its artwork and manage the queue. Official previews are available as individual listening samples with direct store links. Attach your own audio files to use full local playback and queue controls.

Official previews stream directly from their provider and remain individually initiated promotional samples. Full tracks open through official store links. Attached audio stays in the browser and is not uploaded.

Components used

Use this as a starting point

Build with Vlak

Install the components, add the stylesheet, and bring your own content. The study’s source shows how the pieces fit together.

React componentsCSS includedMIT licensed
Install the package
npm install @noorddev/vlak-react
import "@noorddev/vlak-react/css";
Installation guide View study source

Start with your coding agent

A ready-to-use brief with this study, Vlak’s components, and the design guide.

Component modifications

  • Input searches the supplied playlist and Buttons select tracks, favorites and queue actions. Artwork and official store links stay with the selected recording.
  • Playback controls, Media scrubber and Slider operate the actual browser audio element. Progress and duration follow loaded audio; local files enable full queue and repeat behavior.
  • The mobile composition separates Library, Playing and Queue while preserving the selected track, playback state and listening order.
  • On mobile, Library, Playing and Queue use focused screens with persistent transport access. Playback and queue state survive navigation, and artwork keeps a readable, bounded scale.