Welcome to this step-by-step walkthrough of how we created a beautiful, responsive USB music playlist viewer using only web technologies. We’ll highlight each transformation stage and show the exact prompts that guided us to the final product.
🎬 Intro
We began with a basic idea: display a curated set of MP3s from a USB drive with a clean, simple web interface. What followed was an iterative design journey refined with the help of AI prompts.
🔹 Step 1: Starting Simple
We began with a plain HTML file that listed static filenames and added audio players using the <audio> tag.
Prompt Used:
“Please add a shuffle button, track duration, and artwork display.”
This expanded the player with duration display, shuffle logic, and matching album art detection.
🔹 Step 2: Enhancing Playback
We added controls for autoplay, looping, and seamless playback transitions.
Prompt Used:
“Yes, please add autoplay next and loop all.”
These features helped users enjoy uninterrupted ambient music.
🔹 Step 3: Visual Styling & Themes
To give the page a strong identity, we introduced animated SVG backgrounds — one mimicking fiery flames and the other deep space.
Prompt Used:
“Please animate the flames more vividly, then add a theme chooser to choose between ‘flames’ and ‘space’.”
The glowing UI elements added visual immersion.
Unfortunately, this did not work and we had to back out the changes.
🔹 Step 4: Refined UX
We redesigned the interface to focus on one song at a time. Users could navigate with previous/next buttons.
Prompt Used:
“Please extend the page to show only one song at a time, and use navigation controls to cycle through the songs one-at-a-time.”
🔹 Step 5: Sidebar Navigation
We added a sidebar showing the full track list. The current song is highlighted with glowing effects.
Prompts Used:
“Add a list of tracks on the left side that each link to the song”
“Highlight the current track”
This feature made track selection intuitive and visual.
🔹 Step 6: Responsive Layout
The final version resolved fixed-size issues with a fully responsive Flexbox layout and mobile-first styling.
Prompts Used:
“Please make mobile layout improvements”
“Please add responsive font sizing”
“Something is not right about the resizing code. It is not responsive as a whole.”
✅ Final Thoughts
By layering improvements through conversation, we transformed a static audio list into a vibrant and immersive music player — perfect for USB and offline playback.
Let us know if you’d like to see the full code or turn this into a Progressive Web App!