PUBLIC MARKS with tag sounds

This is an experiment in using the web audio API together with canvas to make some interesting and cool-looking visualizations. Since this is my first foray into the world of both canvas and web audio, I have slowly iterated over a number of ideas and trials which are all in the /tests folder.

If you don’t already know, Soundcloud is sort of like YouTube, but for audio rather than video. It provides a rich API for building apps that use its audio streams, so I decided to use it as the source for my visualization (note that you’ll need to register your app to use the Soundcloud API – it’s free and straightforward to do).

Waveform.js makes drawing SoundCloud waveforms simple and lets you style and color them the way you want it. It comes as a small JavaScript library and is using a lightweight service hosted on waveformjs.org that translates the waveform images provided by SoundCloud into floating points.

Imagine you could sleep, relax, work and meditate on the beach. Would you do it?

Feeling that the noise of the big city is too much for you to bear? Just turn on the sound and allow yourself to become engulfed in the tranquil sounds of nature. Whether you wish to feel as if you’re sitting near a fireplace under a cozy blanket, or that you’re meditating on a desolate sea shore as gusts of wind ruffle your hair, Noizio will be there to set the mood. With this ambient sound equalizer, not only will you be able to relax, but you will also increase your productivity, as you’re trying to concentrate on your work!

On a crisp afternoon late last year, I made my way to Manhattan’s Upper East Side to meet Edgar Choueiri, a professor of mechanical and aerospace engineering at Princeton University. Choueiri also heads the school’s 3D Audio and Applied Acoustics lab, and over the last decade, he has dedicated his time to the development, application, and refinement of binaural recording systems — a century-old method of audio recording that captures lifelike 3D audio in picture-perfect fidelity.

"moDernisT" was created by salvaging the sounds and images lost to compression via the MP3 and MP4 codecs. The audio is comprised of lost mp3 compression material from the song "Tom's Diner" famously used as one of the main controls in the listening tests to develop the MP3 encoding algorithm.

Hush lets you block out all the noise that keeps you up at night while letting you rest easy knowing that you’ll still be woken up by the things that matter most.

Jasper is an open source platform for developing always-on, voice-controlled applications

Here is Beez, a web real-time audio experiment using smartphones as synthesizer effect controllers. This is our second Web Audio API experiment made in one Hackday at Zenexity. This time, we were much more focused on having the best latency performance: we used the bleeding-edge WebRTC technology, which allows you to link clients in Peer-to-Peer instead of a classical Client-Server architecture.

A few years ago, I wrote a little ActionScript 3 library called MicRecorder, which allowed you to record the microphone input and export it to a .WAV file. Very simple, but pretty handy. The other day I thought it would be cool to port it to JavaScript. I realized quickly that it is not as easy. In Flash, the SampleDataEvent directly provides the byte stream  PCM samples) from the microphone. With getUserMedia, the Web Audio APIs are required to extract the samples. Note that getUserMedia and Web Audio are not broadly supported yet, but it is coming. Firefox has also landed Web Audio recently, which is great news.

WebAudio Waveform Visualizer Customizable waveform audio visualzation built on top of WebAdio and HTML5 Canvas (plus, optional SVG renderer). With wavesurfer.js you can assemble a full-featured HTML5 audio player or create a sophisticated DJ application.

This project uses the new HTML5 Audio Data API. At the moment, only Firefox 4 beta supports this. Click the visualization area to toggle "fullscreen" mode.

On this page you can experiment with the filters provided by the Web Audio specifications. To run this you need a current build of chrome to work. If you want to allow microphone input, make sure you use headphones for output, and you have to enable the "Web Audio Input" flag in chrome://flags

If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. With this API, currently only supported in Chrome and as of October 2013 also in Firefox, we get access to all kinds of interesting audio components you can use to create, modify and visualize sounds (such as the following spectrogram).

Write a chord in the input (try C13b9 or maybe Fsus4maj#11) above and hit enter. You can click and drag your way around the wave function.

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

ThreeAudio helps you create music visualizations in Three.js, by exposing audio data in GLSL shaders. It can be used directly with Three.js or as a tQuery plug-in.