As Heydon Pickering returns to Pixel Pioneers, they tell us about how writing music directly in HTML has revived their passion for the web, why they don't use Tone.js, and why their 12 principles of web accessibility struck such a chord
Welcome back to Pixel Pioneers! I can’t believe it’s been 8 years! What are you up to these days?
Well, I’m still doing stuff with the web! But I’m also doing a lot more with music. I rediscovered my passion for production during the pandemic and finished off some old demos that had been languishing for years. I released those as Death Garage (because I take a lot of cues from extreme/death metal, but I also like lo-fi garage punk aesthetics).
As we came out of lockdown, I joined a local band, and we’ve had a lot of fun performing weird psychedelic stuff. The sampler I perform with has some interesting generative features. On some of our tracks, I press play and let chance/probability determine what sounds come out. It’s like the sampler improvises along with us. Nothing to do with “AI”, I might add. Just complex meters and randomisation settings.
And what got you interested in making music with HTML?
My first web page designs, over 20 years ago, were all for promoting my music projects. I got heavily into modding MySpace as well. So I was always “music first” anyway. Much later, I heard about the Web Audio API and created a kind of polymetric drum machine called Beadz.
It’s a lot of work to build an instrument like that, and you end up with, well, just an instrument. Like any piece of hardware, it’s going to have certain limitations and design choices you don’t like or get sick of. I was looking for something more abstract, a system for creating (and recreating) instruments and other musical tooling.
But I didn’t want to have to keep writing JavaScript. HTML has always felt intuitive and transparent to me. I think markup is actually really good at describing musical components and relationships. Music is declarative.
Why don’t you just use the Web Audio API and Tone.js?
Well, what I’ve done is based on the Web Audio API. There’s really no way around that. But I’ve chosen to build an interface for the API, from the ground up, using custom elements.
I have dabbled with Tone.js, but I don’t like how monolithic it is — both in size and in it being one big library that can’t be easily broken up and optimised. My approach to using custom elements is to import their JavaScript only when the element actually exists on the page. The less you try to achieve, the less you install — and without a complex tree-shaking/bundling process.
Last time I checked, Tone.js was over 350KB. That’s huge in my books. A reasonably ambitious piece of generative music created with these custom elements, using a sequencer, multiple effects, envelopes and LFOs, is about 30KB: roughly an order of magnitude less.
But the worst part about Tone.js, for me, is that you have to write more of your own JavaScript, on top of the library itself, to make anything. I’d sooner just compose some HTML.
That said, what I’m doing only covers sampling, sequencing, and signal chains. That’s already a lot, but raw synthesis is not available yet. If you want an AM or FM synthesizer, Tone.js is a good place to look.
So what can we expect to take away from your talk at Pixel Pioneers?
Even if you’re not interested in music and sound design, or you don’t think HTML is a good way to go about those things, I’d hope you’d at least see the fun I’m having doing it. In a world saturated with staid, corporate web development, it’s been liberating to find weird, fun, and sometimes ill-advised things to do with web technologies again. I hope folks will see someone who has rediscovered their passion for the web and its creative potential.
Let’s give your 12 principles of accessibility a plug. How surprised were you by the response they received after you put them up on GitHub?
I was kind of surprised, yeah. Especially with all of the translations. Makoto put a whole team together to translate it into Japanese! I try to be clear that they’re my principles only, and that I made them public to keep myself in check. But they seemed to really resonate with a lot of folks.
It was a real privilege to introduce them with a talk in the Netherlands, at NCDT (Nationaal Congres Digitale Toegankelijkheid). I was also asked to workshop them in the afternoon, and we had some great conversations.
One thing that came up, and I still think about a lot, is how much shame motivates developers. There’s a lot of shame associated with writing code that isn’t fast, neat, or using the latest APIs. But you’re rarely shamed for writing inaccessible code. Not by your peers, at least. Where accessibility is designated a measure of quality, like these other factors, there’s shame in dealing with it poorly and motivation to handle it well.
What’s the best piece of advice you’ve ever received?
I’m very poor at taking advice because I like to work things out for myself. Unsolicited advice is especially aggravating! But there is something I’ve learned from watching how other people (everyone from musicians to programmers) make things and that’s “different methods; different results”. If you want to make something unusual or exceptional, you have to change how you go about making it. You have to change your methods, replace your tools. Most of all, you have to do things the wrong way.
In musical terms, I always come back to distortion. In the 50s and early 60s, they were trying to build more and more powerful guitar amplifiers; ones that wouldn’t distort at high volume. Distortion was an artifact of the equipment failing to accurately reproduce the sound. But there was something exciting and transgressive about distorted guitar. Modern amplifiers are generally designed to distort on purpose.
At Pixel Pioneers Bristol 2026, Heydon Pickering will talk about making music with HTML. The conference will also cover new CSS and JavaScript features safe to use in your projects today, designing and building low-carbon websites, creating web layouts with both code and UI design tools, inclusive design, and more. Get your ticket today!