You are browsing as a guest. Sign up (or log in) to start making projects!

SynthwaveOS

  • 3 Devlogs
  • 4 Total hours

A live audio visualizer (based on a 80s theme)

Ship #1

SynthwaveOS - an 80s neon OS

SynthwaveOS is my own little webOS with an 80s outrun theme. You boot it up and you've got a proper desktop: an animated grid scrolling off toward a sunset, scanlines, neon glow on everything, draggable windows, desktop icons, and a live clock ticking away in the top bar.

The centrepiece is a Winamp-style music player with a live visualiser. The bars react to whatever's playing through the Web Audio API - and the three built-in tracks (Neon Drive, Midnight Run, Afterglow) are generated live with oscillators, so there's nothing to download and no copyright mess. Each one is its own pattern with different basslines, drums, tempos, so the bars take on a clearly different shape for each.

You can also load your own MP3 off disk and watch it react to that instead.

What was challenging: the visualiser. Getting bars to genuinely react to the audio meant wiring up the real web audio pipeline (AnalyserNode → frequency data), and the first version was janky and flickered every time you paused and replayed. Most of the final stretch was spent fixing that and smoothing the draw loop rather than adding new stuff, but it's what made it feel finished.

What I'm proud of: that it actually looks and feels like an OS and not a website. The grid, the glow, the visualiser reacting in real time - it comes together into something I genuinely enjoy just clicking around in.

To test it: open it in the browser, click the Player icon, and hit Play - the bars should start moving immediately. Switch between Neon Drive / Midnight Run / Afterglow to see each one move differently, or hit Load MP3 and pick your own song. Drag the windows around, stack them, click between them to raise each to the front, close them with the ×, and reopen from the icons.

Turn it up!!

Try project → See source code →
Open comments for this post

1h 13m 43s logged

SynthwaveOS - Devlog #3
It is finished. Most of the time was spent fixing the some issues rather than adding brand-new features. The biggest change i added was the music player, so that you can now load any MP3 from disk, the player remembers it for the whole session, updates the track label to the filename, and lets you switch away to the synth tracks and back again without losing it. I also expanded the built-in tracks so they feel more like real songs. Neon Drive, Midnight Run and Afterglow now run through longer chord progressions with 32-step patterns, and Afterglow has a slow filter sweep drifting over the top so it evolves over time. I also optimised the drawing code so it runs more smoothly. At this point all is in place and done.

SynthwaveOS - Devlog #3
It is finished. Most of the time was spent fixing the some issues rather than adding brand-new features. The biggest change i added was the music player, so that you can now load any MP3 from disk, the player remembers it for the whole session, updates the track label to the filename, and lets you switch away to the synth tracks and back again without losing it. I also expanded the built-in tracks so they feel more like real songs. Neon Drive, Midnight Run and Afterglow now run through longer chord progressions with 32-step patterns, and Afterglow has a slow filter sweep drifting over the top so it evolves over time. I also optimised the drawing code so it runs more smoothly. At this point all is in place and done.

Replying to @Kvin

0
Open comments for this post

55m 3s logged

SynthwaveOS - Devlog #2

The whole thing actually looks like an OS now instead of a wireframe. I dropped the full synthwave theme on top of the previous skeleton: an animated perspective grid scrolling toward you, a sunset sun, scanlines, neon magenta/cyan glow on everything, and proper retro fonts (Orbitron + VT323). Now each track is its own little pattern - Neon Drive is a busy sawtooth lead with a square bass and hats on every beat, Midnight Run is punchier with offbeat hats and gaps, and Afterglow is a slow soft triangle with a filter sweep and no drums. I also split the visualiser so the bass drives the left bars, the lead and harmonics the middle, and the hats the right. I also added MP3 support with a Load MP3 button that picks any file off disk, so the visualiser reacts to your own music too.

SynthwaveOS - Devlog #2

The whole thing actually looks like an OS now instead of a wireframe. I dropped the full synthwave theme on top of the previous skeleton: an animated perspective grid scrolling toward you, a sunset sun, scanlines, neon magenta/cyan glow on everything, and proper retro fonts (Orbitron + VT323). Now each track is its own little pattern - Neon Drive is a busy sawtooth lead with a square bass and hats on every beat, Midnight Run is punchier with offbeat hats and gaps, and Afterglow is a slow soft triangle with a filter sweep and no drums. I also split the visualiser so the bass drives the left bars, the lead and harmonics the middle, and the hats the right. I also added MP3 support with a Load MP3 button that picks any file off disk, so the visualiser reacts to your own music too.

Replying to @Kvin

0
Open comments for this post

2h 13m 23s logged

SynthwaveOS - Devlog #1

I started building SynthwaveOS, my very own web-based operating system with an 80s synthwave theme. The idea is a little neon command centre you can boot up in the browser with a Winamp-style music player with a visualiser that reacts to the audio. I’ve set up the whole skeleton from scratch - three windows (Welcome, Player, Tracks), a top bar with a live ticking clock, and three desktop icons that select and open their windows. For now, the windows drag around, close with the x, and raise to the front when you click them, with the top bar always staying on top. I wanted the whole thing working and testable first, so if something breaks later I know it’s the styling or the visualiser. Next up: the full synthwave with animated perspective grid wallpaper, the sunset gradient, glow everywhere, a proper retro font, and the gradient magenta→cyan visualiser bars.

SynthwaveOS - Devlog #1

I started building SynthwaveOS, my very own web-based operating system with an 80s synthwave theme. The idea is a little neon command centre you can boot up in the browser with a Winamp-style music player with a visualiser that reacts to the audio. I’ve set up the whole skeleton from scratch - three windows (Welcome, Player, Tracks), a top bar with a live ticking clock, and three desktop icons that select and open their windows. For now, the windows drag around, close with the x, and raise to the front when you click them, with the top bar always staying on top. I wanted the whole thing working and testable first, so if something breaks later I know it’s the styling or the visualiser. Next up: the full synthwave with animated perspective grid wallpaper, the sunset gradient, glow everywhere, a proper retro font, and the gradient magenta→cyan visualiser bars.

Replying to @Kvin

0

Followers

Loading…