32 Megabytes of Revolution
The story behind The Rio
Inspired by Rio PMP300 on Wikipedia
Built with HTML · CSS · Vanilla JS
Techniques Device Photography Overlay · LCD Pixel Font · Button Hotspot Mapping · State Machine Playback
Direction Recreate the Diamond Rio PMP300 as a functional web interface — real device image, working LCD display overlay, invisible button hotspots mapped to the original hardware layout, loaded with Billboard’s 1998 chart-toppers
Result A pixel-perfect MP3 player from 1998 you can actually use — play, pause, skip, adjust volume, shuffle, repeat, and A-B loop through 10 tracks that defined the year portable music changed forever
The Story
In September 1998, Diamond Multimedia shipped the Rio PMP300. It cost $200. It held 32 megabytes of flash memory — roughly 10 songs at 128kbps, or about 30 minutes of music. It had a tiny LCD screen, a jog dial, and five buttons.
The Recording Industry Association of America immediately sued to stop it. They argued the Rio was a piracy device — that letting people transfer MP3 files from their computers to a portable player was copyright infringement. The case went to the Ninth Circuit Court of Appeals.
Diamond Multimedia won. The court ruled that personal copying for portable use was fair use, protected under the Audio Home Recording Act. That ruling didn’t just save the Rio. It created the legal precedent for every portable music player that followed: the iPod, the Zune, the entire smartphone era.
32 megabytes. 10 songs. A court case that reshaped the music industry.
The Take
We remember the iPod. We don’t remember the Rio.
History compresses. The messy, uncertain, legally contested first version gets overwritten by the sleek successor that arrives once the path is clear. Apple launched the iPod in 2001, three years after Diamond Multimedia had already fought and won the legal battle that made it possible.
The Rio PMP300 was ugly. The interface was clunky. The storage was laughable — you’d fill it in an afternoon and have to choose which songs to delete to add new ones. But that constraint was part of the experience. When you only have room for 10 songs, every slot matters. You curate. You agonize over track 7. You know your playlist by heart because it’s the only playlist you have.
There’s something the abundance of streaming erased: the intimacy of a finite library. When you can play anything, nothing is special. When you can only carry 10 songs, each one becomes a companion.
The Tech
The Rio is a DOM-based device recreation with no canvas, no WebGL — just HTML, CSS, and vanilla JavaScript pretending to be hardware from 1998.
The foundation is a photograph of the actual Rio PMP300 device. On top of it, invisible button hotspots are positioned to match the physical button layout:
- Play/Pause, Stop, Prev, Next: Transport controls mapped to the device’s front face
- Volume Up/Down: Rocker buttons on the side
- Random, Repeat, A-B Loop: Function buttons along the bottom edge
- Keyboard shortcuts: Space for play/pause, arrows for navigation, R/T/A for modes
The LCD overlay sits precisely over the device’s screen area, using pixel-appropriate fonts and a green-tinted color scheme that mimics the original backlit display. Three rows: track number and status icons on top, scrolling title in the middle, time and artist on the bottom.
The playlist is Billboard’s top 10 singles from 1998 — the songs people were actually ripping to MP3 when the Rio shipped. Brandy & Monica, Savage Garden, Will Smith, Janet Jackson, Elton John. Each track has its real duration for authentic playback timing.
The A-B loop feature is a faithful recreation of the original hardware’s most niche function: set point A, set point B, and the player loops between them. DJs and language learners used this constantly. Most people never touched it. It’s here anyway, because the Rio had it.
Volume changes flash briefly on the LCD before returning to the track display — exactly how the original hardware behaved, using the screen as a temporary OSD before CRT-style on-screen displays were common in portable devices.
The Experience
Press play. “The Boy Is Mine” starts counting up on the LCD.
Skip forward. Watch the track number increment, the title change, the timer reset. Hit previous within 3 seconds and you go back a track; hit it after 3 seconds and it restarts the current one — the same behavior every portable music player inherited from CD players.
Turn on shuffle. The RND indicator lights up. Turn on repeat. RPT appears. Set an A-B loop and watch the display show your loop points.
Adjust the volume and the title briefly flashes “VOLUME: 16” before returning to the track name. Every interaction follows the original device’s behavior as closely as a web page can simulate hardware buttons and a two-line LCD.
The storage bar at the bottom reads “32MB FULL” because that’s the truth — 10 songs at decent quality fills 32 megabytes completely. There is no room for an 11th. This is what portable music sounded like before the cloud.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.