Theremin-eqsue HTML5

I’ve spent the last few days thinking about theremins, the musical instrument that you play without touching. When I went to see a band called Spaceships Are Cool the other day it triggered my mind. One night I suddenly decided it would be possible to make a theremin that worked using only one hand using a different design.

I plan to make one at some point in the future, when I get the parts in one place… For now I decided that I would build my concept in the browser. I started out making it with a bunch of div tags, which was frustrating, and then I realised that I could use the <canvas> tag from HTML5 to do it.

I threw together a quick page and then began thinking about the sound. I found a page detailing generating sound in Javascript in Firefox 4 and decided to go with that. I installed Firefox 4 and then started playing around with scripting everything. I started out by picking apart Paul Irish’s harmony.js file (view that site in Google Chrome and scroll to the bottom). Then I added in the sound stuff once I had values for the cursor position.

What I ended up with was a very plain page that generates sound (in Firefox 4) with the pitch determined by the cursor position on the X axis, and the volume on the Y axis. The sample time is 50ms, and at the moment there’s a bit of an annoying click. I think I might be able to get rid of that by keeping the audio element playing at 0 volume or something like that, but that’s debugging for another day.

Anyway, if you’re viewing this on my page in Firefox 4 then you should see the finished product underneath. If you’re viewing this in a feed or on Facebook then you’ll want to go here. If you’re not using Firefox 4, or you’re not sure what browser you’re using then this probably won’t work for you and you’re probably very bored of reading this by now.

Old web techniques

I often go around looking at the source for the websites I frequent. It’s not very interesting to most people, but I am not most people.

Something I’ve noticed a few times in the last couple of weeks is that sites are suddenly using an evolved form of a script I was very familiar with many years ago:

if(top.location != self) {
  top.location.replace(document.location.href);
}

That’s how it appears on Last.fm. Essentially the script checks to see if the page is contained within another page, and then takes the user to the page by itself if it is. This gets rid of page headings you sometimes see from sites like Digg and Facebook when you follow a link from there.

The script used to be used to make your own site break out of frames put there by sites like Geocities (R.I.P.) before domains and hosting were quite so affordable. Obviously now there are basically no sites on the Internet that use frames in the traditional sense (that’s a good thing), but the modern equivalent (iframes) are pretty much all over the place. They tend to be used for displaying external content rather than the layout of internal content, but the idea is mostly the same: multiple documents on one page.

I just find it somewhat interesting that “web 2.0” seems to be encountering the exact same things I really hated about web 1.0 all those years ago.