nowfound

Life & fun · May 18, 2012

HTML5 Piano - with its own data URI synth

A synth piano synth that generates all of its audio files dynamically using JavaScript and data URIs. Choose from a variety of sounds styles and play with the looper, visual waveforms, and more.

HTML5 Piano - with its own data URI synth launched on May 18, 2012 with 64 votes, #27 of 435 launches that month and more than 90% of that year's launches. The site was still online in September 2026, 14 years on.

Visit mrcoles.com ↗Alternativestop 6% of May 2012

In plain words

HTML5 Piano is a browser-based synthesizer keyboard built entirely with HTML, JavaScript, and CSS. It generates all audio dynamically at the byte level using data URIs rather than pre-recorded files. Players can choose from several synth styles with adjustable decay settings, use a looper to build compositions, and view real-time waveform visualizations. The interface includes configurable colors and a demo mode, with all controls accessible via the top-right menu button.

written from the facts on this page · September 2026

From the sources

This synth piano is written solely using HTML, JS, and CSS. It contains a small handful of synths with configurable decays, a looper, demo mode, visual mode, and a variety of colors. View controls by hitting the top-right button on the piano. It doesn't use a single static audio file, instead it generates them on the fly at the byte level and then converts them to files using the data URI schema. On a similar note, it doesn't use a single image either, just CSS. You can make pretty much any kind of file with a data URI, such as a bitmap file or a favicon . Currently iOS doesn’t support HTML5 audio well enough in the browser to make this work. So, no go on iPhone and iPad, for now. Various…from mrcoles.com

Does a similar job

all alternatives →
  • AS
    A singing synthesizer for the browser with automatic 3-part harmony2024 · pbat.ch · ▲208
  • Building musical synthesizers with SQL queries2023 · github.com · ▲176

    If you already know what bytebeat is, you don't need an explanation. If not, check my project :) Here is how it looks: SELECT mono(output( arraySum(x -> 1 / 6 * running_envelope(30 * (1 + x / 6), time, 0.05 * x, 0.005, lfo(0, 0.25, sine_wave, time / 8), 0.1) * sine_wave(time * 80 * exp2(x / 3)), range(12)))) FROM table; To check how it sounds, find the examples in the repository https://github.com/ClickHouse/NoiSQL

  • PW
    Polyphonic Web Audio Synthesizer2017 · errozero.co.uk · ▲7

    Web audio based synth, play it with the computer keyboard or a MIDI keyboard.

  • IB
    I built a WebMIDI sequencer to control my hardware synthsDec 2025 · simplychris.ai · ▲43

    Hey HN, I’m an ex-Google engineer trying to get back into music production. I needed a way to sequence my hardware synths using AI contexts without constantly switching windows, so I built this. It runs entirely in the browser using WebMIDI. No login required. It connects to your local MIDI devices (if you're on Chrome/Edge) and lets you generate patterns. Tech stack: [React / WebMIDI API / etc]. Link: www.simplychris.ai/droplets Code is a bit messy, but it works. Feedback welcome.

  • AJ
    A JavaScript emulator of the Synthi A synthesizer2016 · alexnisnevich.github.io · ▲68

    SYNTHI-JS is a JavaScript emulation of the legendary EMS Synthi A analog synthesizer.

  • Coffee PianoMay 2026 · coffeepiano.com · ▲101

    Browser music and piano studio with visual harmony tools

More life & fun this month

the category →

Source: Show HN post ↗

Launched alongside, May 2012

the whole month →