My Dad had a iPod Nano 4 Generation in light blue. We traded music a lot over the years. Then, in 2018, sat in the family kitchen, going through his stuff for the estate paperwork, I had a nose through his iPod he’d bought himself. I was amazed at how many albums I’d sent him over the years had made it on there. A real eclectic but limited collection of tunes that in the last few years of his life he’d put on around the house, at the work gym or in the car.
I ripped the collection off the iPod and onto a hard disk. Which, as with 99% of our digital legacies, has sat, doing nothing. Until now, now you can surf my Dad’s iPod and listen to his tunes.
What’s going on here?
The iPod is HTML & CSS for rendering it appearance. The music arrives via a YouTube embedded player, playback triggered by javascript when you control the iPod. The local MP3 collection was scanned, a manifest was generated and connected to YouTube video listings. The album artwork was extracted from the ID3 metadata of the file, stored and also added to the manifest file.
It’s an ultra lightweight tech approach so it can live happily on my LAMP box.
Paul's iPod
My dad's iPod as a website. Surf his tunes.
What went in to making this?
Styling the iPod. I was intrigued to see if the agent could nail the front end visual design so I started this project with image prompting. I guess I assumed that Codex/OpenAI would rattle through closer attempts than Claude, what with the image generation services being stronger.
Curiosity got the better of me and I kept at the text and visual prompt approach for a while longer to see what was possible.
At this point it was time for the right prescription. Burning tokens describing design changes, especially pixel accuracy is a thankless task. Jumping into the CSS has merits but can also still result in a lot of switching, scrolling, refreshing and confusion if you take your eyes off the target for a moment.
I really enjoy the effectiveness of getting the agent to build you design GUI controls when you’re working on details or variations. It’s incredibly low effort and allows you to centre in on getting the right results, copy the changes and prompt them back in within minutes.
I dialled in the step gradient in Figma by colour pick matching a Apple render/shot of the iPod. Drew out a few transport controls by overlay and did some digging for the correct font used on this generation of iPods.
What was on my don’t do list?
What if I can recreate the iPod and anyone can listen to his collection when they fancy? One of the killer features about an iPod is that it just plays music. No logging in, no goofy promotional banners, it’s a device that you drive, it doesn’t drive you. I wanted a way that I could press play on the website without having to navigate a streaming platform. Yeah, you could be cheeky and serve all the actual files up and cross your fingers that the world largest record companies never find your DIY project for a few tunes.
Do not…
Messing around with the embeds of streaming is what to the idea of using YouTube embeds, and then in turn setting the agent off to scan YouTube on a limited request at a time job to bring back the urls for the music.
What’s going to happen next?
The YouTube look up script did an OK job of finding tracks, but there are quite a few tracks that are completely and quite hilariously wrong.
So I started making a quick little admin tool I could run locally to improve the accuracy of the manifest. I still need to sit down and trawl through the whole library to check them. I guess I could automate it using some type of audio signature model, but then we’ve got to consider music video track variations, live only on YouTube, recording from vinyl etc. Probably quicker to smash through the manual checs the long hard stupid way.
Last on the immediate to-do’s is correcting the album artwork. The MP3s did have some within the metadata, but we’re also missing quite a few. I scrambled around with a few methods to do this until I remembered I actually had an app for that – Meta (music tag editor) – support them and buy this app if you manage local music file https://www.nightbirdsevolve.com/meta/
So, quick recap:
- Find a couple of hours to audio check the library, republish manifest
- Fix the MP3’s without album artwork using Meta.app, update manifest
- Job done. Or is it?
One More Thing…
I’m in no rush to do this, but, I have been wondering about his vinyl and CD collection. What would the site look like if you could pick between the formats and put on a CD or vinyl. Would the simplicity of the iPod user experience get lost in the noise of a virtual record player? Perhaps one day I will get to it. And perhaps I’ll know how to execute it when I’m there.
Paul's iPod
My dad's iPod as a website. Surf his tunes.