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.
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.
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.
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.
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.
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.”
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.
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.”
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!