Audio – CreativeJS http://creativejs.com The very best of creative JavaScript and HTML5 Wed, 03 Jun 2015 20:19:39 +0000 en-US hourly 1 https://wordpress.org/?v=4.4.1 Sound Viz http://creativejs.com/2014/03/sound-viz/ Thu, 20 Mar 2014 10:00:03 +0000 http://creativejs.com/?p=6182 Continue reading ]]> Creative coder extraordinaire Bartek Drodz put together this breathtaking sound visualization using a host of modern web technologies. Not merely content to do a single visualization, Bartek threw in five of them… and then added in Leap Motion control to boot!

From the man himself:

This is a series of visuals I created for a party organized by Tool in February. They were projected on a wall and guests could interact with them using a Leap Motion device.

From the looks of his code (which is open sourced here) it looks like Bartek challenged himself to use as few libraries as possible in the build. I’d love to see a writeup from him outlining his creative and decision-making process.

More and more it seems web technologies are being seen as viable options to lower-level creative coding frameworks. So, so cool!

Sound Viz by Bartek Drodz

]]>
Bouncy Balls http://creativejs.com/2014/02/bouncy-balls/ Fri, 14 Feb 2014 12:00:06 +0000 http://creativejs.com/?p=6135 Continue reading ]]> bouncyballs

Bouncy Balls is a fun new browser toy from Paul Neave that’s perfect for your Friday afternoon. Bounce balls, bubbles, eyeballs and more around your screen with your mouse or by tilting your phone. There’s even a microphone mode so you can set it to music or just shout at it a little for some stress relief if that’s the sort of day you’re having. Endless hours of fun :)

Bouncy Balls
from Paul Neave

]]>
WebSID http://creativejs.com/2014/02/websid/ Fri, 14 Feb 2014 11:00:07 +0000 http://creativejs.com/?p=6140 Continue reading ]]> webSID

Re-live your childhood Commodore64 days with this Chrome Experiment, WebSID. It uses the WebAudio API so all the sounds are generated, no samples here! Use the keyboard to play multiple notes at once and even transpose. It works on mobile too. It’s a Chrome Experiment, so your results outside of Chrome may vary, of course.

WebSID
From Igor Zinken

]]>
Drop Experiment – Uncontrol http://creativejs.com/2013/02/drop-experiment/ Thu, 07 Feb 2013 13:00:48 +0000 http://creativejs.com/?p=5001 Continue reading ]]> drop

Drop is the latest experiment from Manny Tan on uncontrol using with Three.js, Web Audio and jstween. Dancing abstract shapes and meshes react to the audio track and your mouse movements on click or scroll. You get a slightly different view of the shapes depending on which part of the screen it moves into when you move it around and change the zoom.

To see how the final piece took form, check out the 24 earlier iterations linked on the left. Some of the earlier ones include controls for you to explore further. I especially like the story behind the inspiration and early sketches, including an early model made with bendy straws :)

Drop Experiment
Drop Experiment post
By Manny Tan

]]>
Web Audio API – position and convolution http://creativejs.com/2012/07/web-audio-api-position-and-convolution/ Fri, 20 Jul 2012 14:00:52 +0000 http://creativejs.com/?p=4319 Continue reading ]]>

We do love to keep our word so, as promised, here’s the next part of our series of tutorials on the Web Audio API.

This time we have a go at moving the sound around and eventually sticking it in a dustbin. It’ll all make sense once you’ve read it.

If you haven’t already, read through part one

]]>
Introduction to the Web Audio API http://creativejs.com/2012/06/introduction-to-the-web-audio-api/ Fri, 15 Jun 2012 15:39:03 +0000 http://creativejs.com/?p=4169 Continue reading ]]>
Following on from some of the impressive demos we’ve seen lately, we thought it was about time to introduce people to one of the coolest tools available to Creative JavaScripters.

New to our resources section, we bring you the first part of a series of guides to the Web Audio API.

]]>
Spectrascade: WebGL music viz http://creativejs.com/2012/06/spectrascade-webgl-music-viz/ http://creativejs.com/2012/06/spectrascade-webgl-music-viz/#comments Wed, 06 Jun 2012 11:00:13 +0000 http://creativejs.com/?p=4090 Continue reading ]]>

Spectrascade is an interactive, tunable WebGL music visualisation project that takes inspiration from both HelloEnjoy’s Lights, and the fun music game Auditorium. (check out both, if you haven’t already!)

The running visualisation can be manipulated using the mouse (both buttons) or tweaked via a myriad of parameters in the control panel.

Interestingly they chose to perform the audio analysis on the server side, with results streamed to the browser for visualisation. I can only presume that this was for performance… and to avoid some of the mess that is cross-browser HTML5 Audio. 😉

The accompanying blog post details their implementation and plans for the future.

Spectrascade: a WebGL music visualisation game
Accompanying blog post
Lights
Auditorium

]]>
http://creativejs.com/2012/06/spectrascade-webgl-music-viz/feed/ 1
Google Moog synth tear-down http://creativejs.com/2012/05/google-moog-synth-tear-down/ http://creativejs.com/2012/05/google-moog-synth-tear-down/#comments Wed, 23 May 2012 10:42:08 +0000 http://creativejs.com/?p=4005 Continue reading ]]>

Yesterday we featured Google’s web-based analogue synth Moog tribute when we found it on the Japanese site several hours before it hit the rest of the world. We were so impressed with it that we decided to rip it apart to see how it works!

It celebrates the 78th anniversary of the birth of Bob Moog, inventor of the Moog synthesiser (pronounced Mogue, like vogue, so sadly doesn’t quite work as ‘Moogle’). They’re using the new, not-quite-a-standard-yet Web Audio API to create a fully-functional synthesiser.

Because the Web Audio API is so new, this synthesiser uses webkitAudioContext in browsers that support it and falls back to Flash 10 (or above) for everything other than Chrome.

The Web Audio API is an extremely powerful tool for controlling audio in the browser. It is based around the concept of Audio Routes which are a common tool in sound engineering. This is a simple, but powerful way of representing the connections between a sound source and a destination, in this case, your speakers. Between these two end points, you can connect any number of nodes which take the audio data passed in, manipulate it in some way and output it to which ever nodes are connected next in the chain.

The common node types found in sound engineering are all present. To control the volume, you would create a gain node and set the value then place this in between the source and destination. Similarly, you can create filter nodes – specifically Biquad filters – and connect these too. By connecting several of these nodes, you can have fine-grained control over the audio produced.

In this Moog synthesiser, Google are primarily making use of another type of node specific to the Web Audio API – JavaScriptAudioNode. This is a node which can be used for audio generation or processing. This means that the synthesiser doesn’t rely on sampled audio files but actually generates the original signal in real-time before passing it through the various filters.

If you dig into the large amount of JavaScript powering this doodle, you’ll find that the majority is actually dedicated to handling the UI. The Web Audio API provides a great abstraction of the complicated audio processing underneath that by simply allowing the user to play with the settings (via all the knobs), the amount of code dedicated to creating the sound is actually quite small. Relatively. There’s also a nice little feature that encodes the audio and allows you to share multi-track recordings like this one we made earlier.

I’m sure Robert Moog would have had a great time playing with the API.

[UPDATE] we just found even more info about this on the Google Doodle blog post.

Moog synth on Google Doodle archives

]]>
http://creativejs.com/2012/05/google-moog-synth-tear-down/feed/ 6 Analogue synth on Google.jp http://creativejs.com/2012/05/analogue-synth-on-google-jp/ Tue, 22 May 2012 16:39:59 +0000 http://creativejs.com/?p=3986 Continue reading ]]>

[UPDATE] it’s on Google Australia now and is to celebrate synth pioneer Bob Moog’s birthday, so should be coming to US / UK tomorrow.

There a rather fun little toy on the Japanese Google page today – an analogue synth emulator. I’m assuming that it uses the WebAudio API – it seems to fall back to a Flash object in FireFox. But go check it out for yourself.

Analogue synth on Google.jp

]]>
JS1K Speech Synthesizer http://creativejs.com/2012/03/js1k-speech-synthesizer/ Fri, 23 Mar 2012 11:55:54 +0000 http://creativejs.com/?p=3502 Continue reading ]]>

When you think of your computer talking to you it’s usually space aged computers and robots, or maybe Siri if you’re less imaginative. You probably don’t think of it happening in your browser, and especially not something made for JS1K.

Showing up the other sound generating entries, Mathieu Henri created this JS1K Speech Synthesizer for the contest. It’s a super simple speech synthesizer that “says” what you’re typing as you type, and then the whole line once you hit enter.

While it’s pretty amazing to see this done in your browser and at such a small file size, you’re not going to be able to use this for your next round of prank calls:

To go under 1K, I had to limit the synthesizer to two format filters using either a sawtooth or noise and discard plosive sounds. In other words I had to sacrifice quality a bit.

Either way, it’s very impressive! You can play the live demo , or check out the source and more on Matieu’s site.

JS1K Speech Sythesizer by Mathieu Henri.

]]>