HTMello

A website is a song.

What is it?

It's a musical instrument, a developer tool, a visualizer, and a window for everyone to see and hear what's going on in your browser.

HTMello is a browser extension that turns your browser into a musical instrument. In the tradition of kinetic music, sounds are triggered by the environment, and the experience can be at once rhythmic and random. The addition of "user events" to the instrument, means all of your actions on any website will add to the music.

But, HTMello is also a new way to understand what your browser is doing in a deeper way. The extension monitors browser events that are often hard to visualize, assigns them a sound, allowing you to hear the activity behind the scenes.

You might be surprised by what you see and hear.

Why?

I've been dreaming of this thing for years. As a web developer, I'm often aware that there's a whole lot of stuff going on unseen by me in the browser, but it's sometimes just out of reach to actually see and process most if it in real time. Audio turns out to be a great way to distinguish a bunch of events that might look similar in text (console.logs, musical notes on a page).

I've also been interested in musical sculpture, kinetic music, and procedurally generated music. HTMello lives at an odd intersection of those three ideas, while preserving the ability to add your own musicality to your browsing experience.

Currently responds to the following events:

• DOM events (element visible, element added, element removed)
• Fetch/XHR requests (request, success, and failure)
• Mouse movement
• Keyboard input: letters have unique tones, and capital letters are an octave higher.
• Clicks
• Scrolling
• Cookie changes (set, modified, removed)
• Local storage writes
• Session storage writes
• "Long tasks": any script execution that occupies the browser's main thread for 50 milliseconds or longer.

Try it out!

Security Notes

1. HTMello does monitor low-level browser APIs, but any data for its use is processed locally in your browser and will never be transmitted by our software.
2. Generic tones will be played for keydown events in password fields to prevent auditory letter identification.
3. We can not advise on the trustworthiness activity you may see on any website, except our own. Part of the purpose of this extension is to allow you to see what's going on behind the scenes, but we aren't here to make judgements about the prudence of any particular website's methods or behaviors. It all makes music in the end...

Getting Started

Install the extension.

TK

Activate the extension.

TK

Manage the extension.

Once the extension is installed and activated, visit a webpage. Your first pageload in a new tab/window will require you to interact before audio will be allowed to play.

Click the HTMello icon in your browser toolbar to open the extension options popup. From there, you can toggle two things:

1. The visual overlay
2. The audio playback

---

NOTE

Because HTMello depends on the WebAudio API, you must interact with the page before the audio will play. Unfortunately, reloading the page will reset the interaction state. Once activated, audio should continue through other normal page navigation (links, back, forward, etc.).