Harmogram, Web Audio API + Canvas (Paper.js) FFT/Harmonograph

In plain words

Harmogram is an audio visual experiment that uses the HTML5 Audio API and Paper.js to create visual representations of sound. It analyzes audio tracks from SoundCloud and generates animated graphics based on frequency data using FFT analysis and harmonograph principles. The tool is designed for developers and audio enthusiasts interested in exploring the intersection of sound and visual art through web technologies.

written from the facts on this page · September 2026

From the sources

Powered by the HTML5 Audio API and Paper.js , with tracks and channels provided by the Soundcloud APIfrom harmogram.com

• IV
  I've built a spectrogram analyzer web app2023 · webfft.net · ▲244
• 
  Web Audio Studio – A Visual Debugger for Web Audio API GraphsMar 2026 · webaudio.studio · ▲64

  Hi HN, I’ve been working on a browser-based tool for exploring and debugging Web Audio API graphs. Web Audio Studio lets you write real Web Audio API code, run it, and see the runtime graph it produces as an interactive visual representation. Instead of mentally tracking connect() calls, you can inspect the actual structure of the graph, follow signal flow, and tweak parameters while the audio is playing. It includes built-in visualizations for common node types — waveforms, filter responses, analyser time and frequency views, compressor transfer curves, waveshaper distortion, spatial…

• 
  Draw.Audio – A musical sketchpad using the Web Audio API2024 · draw.audio · ▲249

  Draw.Audio is a free online music maker. Draw notes on a grid and hear them play back instantly — a browser-based synthesizer, sequencer, and visual instrument.

• 
  Olaf – Acoustic Fingerprinting on the ESP32 and in the Browser2020 · 0110.be · ▲166

  Olaf - Acoustic fingerprinting on the ESP32 and in the Browser

• 
  Ossia score – A sequencer for audio-visual artists2025 · github.com · ▲95

  ossia score, an interactive sequencer for the intermedia arts - ossia/score

• FT
  Fourier Transform Visualized via WebGL2021 · static.laszlokorte.de · ▲175

• 
  /dev/null▲472

  a social network for devs

  Dev tools · 2d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 25d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 22d ago · openbot.run

• 
  Talanoa▲340

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 27d ago · corespeed.io

• AJ
  Analytics.js – The analytics API you've always wanted▲326

  Dev tools · 2012 · segmentio.github.com

• SI
  Scratchpad.io - a real-time HTML and CSS editor▲298

  Dash is a fun and free online course from General Assembly that teaches you how to program with the basics of web development through projects you can do right in your browser. Get started today!

  Life & fun · 2012 · scratchpad.io

• IS
  Interactive SICP▲280

  Life & fun · 2012 · xuanji.appspot.com

• 
  CSS3 animation▲271

  An experiment with basic CSS3 animations.

  Life & fun · 2012 · thegoodman.cc

• CD
  Clojure DSL for pattern-matching, parsing and generic programming▲204

  Life & fun · 2012 · scattered-thoughts.net

• ET
  Ember Table by Addepar▲199

  Life & fun · 2012 · addepar.github.com