Create Music with Technitone (again!)

In 2011, we worked with Google on a Chrome experiment to demo the then-new Web Audio API. Although we were only tasked with coming up with something that could show the new audio features, our (often-excitable) team came up with a project that pushed our capabilities in a ton of technologies, including WebGL, Canvas, web sockets for multi-player, and CSS animations. For a great technical dive into the original Technitone.com we launched with, check out the html5rocks.com article!

Over the 3 years or so that Technitone was online, users contributed over 50,000 patterns, many published to the public gallery for voting, and the app was even featured in a Google Chrome ad and listed as one of the top new music services for Google Chrome by Rolling Stone. After a good run, the traffic died down, but due to the awesome multi-player requirements, the costs to run the site encouraged us to take it down. We left up a great video showing visitors what they missed out on, and moved on to the next project at gskinner.

Recently, we have seen Web Audio and WebGL become prevalent in most major modern browsers, and one of our developers tested the old site with Firefox, Safari, and even on iOS and Android (sorry, IE!). When it was clear that the site could work (almost) everywhere, we formulated a launch plan. The big goals for a relaunch were:

1. Fix cross-browser issues
We want it to run in as many modern browsers as we could. We decided to drop mobile (even though it kind of works) because it would require a rework of a lot of the mouse interactions that didn’t play well on touch. Maybe some day!

2. Toast multi-player
It is cool to make tones with your friends or anonymous strangers, but not necessary for the core experience. By pulling the NodeJS dependency, maintenance and costs could get a lot more manageable.

3. Revisit the grid aesthetic
It has been a few years since our first dive into WebGL, and we thought we could do better. One of our resident 3D enthusiasts took on the challenge, and built a brand new grid using three.js.

The new Technitone grid, powered by three.js

4. Make discovering and sharing patterns easier
The old gallery paginated 4 patterns at a time, and was not the best way to dig into the giant pattern library. The new one shows a full screen of patterns, with a lazy load when scrolling. It was amazing to go through hundreds of the “All Time Best” patterns and find some real gems, like this sesame street homage way down the list. Check out the new gallery, it is awesome!

The new full-screen technitone gallery

Standing out in the crowd

Have a scroll through the top patterns, and find some favorites of your own. Here are some of ours:

• Mario: http://technitone.com/od9r71u4xsp
• Red: http://technitone.com/pkb8c854hdg
• Mona Lisa: http://technitone.com/nbdd5f7yfmt
• Heart Rate: http://technitone.com/bdg9tycv7ed
• Avicii (#1 track) http://technitone.com/t1b3anz7ybd
• Poker Face: http://technitone.com/d4xm1t9338f
• Derezzed (Tron): http://technitone.com/zddk0d3a2fy
• X-Files: http://technitone.com/f07qe9udsnj
• Name that tune! http://technitone.com/5uc965hdgow

Some creative technitoners (that’s what we call them) even used the grid as an artistic canvas:

Clever use of the grid

Into the Future

We still have some fun plans with Technitone, and welcome feedback and suggestions! One of our big ideas we have already started on is the most user-requested feature: Multiple grids per track, to make longer songs. And we would love to bring the experience to mobile. Does that sound interesting? Let us know in the comments.

Thanks to everyone who has used Technitone in the past, to Google for supporting the first version, and to the awesome developers and designers at gskinner who brought it back to life.

gskinner crew: these guys rock!

Enjoy!