Open source javascript wrapper for the web audio API.
by createJS
http://www.createjs.com/#!/SoundJS
Open source javascript wrapper for the web audio API.
by createJS
http://www.createjs.com/#!/SoundJS
This is a tweak of a demo program by Boris Smus from http://webaudioapi.com
The audio is generated in the web browser using the webaudio API. Oscillator frequency is being controlled by an iPod touch running touchOSC.
A ruby program is running in the background. It starts 2 servers, one to handle Osc messages from the iPod. and a websockets server which passes Osc messages to the web client in the browser, which parses the data and sets oscillator frequency.
local source files in tkzic/web-audio-api/webaudioapi/content/posts/oscillator-ws
(these are for my local files – source has not been published yet) Please contact me directly for more information about this code. Or have a look at a very similar example at: https://github.com/tkzic/WebAudio
1. run the node webserver in tkzic/
node nodeserver.js
(it will run on localhost port 8081 – for example http://127.0.0.1:8081)
2. In Chrome web browser, run: http://192.168.1.104:8081/web-audio-api/webaudioapi/content/posts/oscillator-ws/index.html
The following screen will appear:
3. From a terminal prompt run this ruby script (in tkzic/web-audio-api/webaudioapi/content/posts/oscillator-ws)
./wapOSCserver.rb
4. In webpage in Chrome, click the sockets button – the ruby server should open a socket connection, also click the play/pause button to start the oscillator
5. In touchOSC point the host to the ip address of the laptop (ie., 192.168.1.104) running on default ports, (out 8000, in 9000)
6. In touchOSC run the ‘simple’ layout and move fader1 to change the pitch of the oscillator
Note: You will probably also want to open the developer javascript console in Chrome to see what is going on.
Need to clean up the ruby server code to handle error conditions, ie., network interruptions, missing files, browser incompatibility, etc.,
Update 6/2014 – Working examples at Internet sensors projects: https://reactivemusic.net/?p=5859
original post
http://www.html5rocks.com/en/tutorials/websockets/basics/
http://www.websocket.org/echo.html
http://html5demos.com/web-socket
Got some examples running in web sockets (finally). Like with node.js, you can’t access servers from outside, which specify their ip address as localhost – you need to actually set a real ip, even if its a private ip like 192.168.1.20
Anyway I was able to get a ruby websocket server running using em-websocket and also another version using eventmachine.
Local files are in tkzic/websockets
the examples are running a public server at http://zerokidz.com/websockets/index.html
(need to start the server – also in that directory: ./server.rb
There’s also a simple node.js webserver in that folder – but after solving the problem above – apache works just fine.
For prototyping web apps on Mac OS, for example.
By César Pinto Castillo
https://github.com/JagCesar/Really-simple-web-server-Node-JS
update 11/20/2014
re-cloned local copy of repository to tkzic/webaudioapi.com
Also have copied the updates to my online server http://zerokidz.com/webaudioapi/content/posts
original post
http://webaudioapi.com/samples
Some notes on using the examples from the github repository… https://github.com/borismus/webaudioapi.com
Each example is contained in a post/ folder, but… a few things were missing – like the html wrappers for each example. They can be copied from http://webaudioapi.com/samples, using ‘view source’ and making these changes:
Then copy style.css and js/shared.js and place them in a static/ folder at the same level as posts. This way the examples will look right and have all shared refs.
My version of source is in: tkzic/web-audio-api/webaudioapi
Also try this link (not updated since 3/14/2013) http://zerokidz.com/webaudioapi/content/posts
I have kept the original zip, but it appears the archive is under active development and its probably worth cloning it and keeping it up to date…
Btw, this code and the book is amazing.
With full source code examples.
By Boris Smus at HTML5 Rocks
http://www.html5rocks.com/en/tutorials/webaudio/intro/
update 5/2014
To get full source with comments, make a URL in this format – (the buttons on the tutorial page only gives minified JS)
http://www.html5rocks.com/en/tutorials/webaudio/intro/js/rhythm-sample.js?ModPagespeed=off
Here’s a note about it: https://github.com/html5rocks/www.html5rocks.com/issues/367
To get the source for the UI – ie., buttons and sliders – just view the page source for the tutorial
Scheduling Web Audio
http://www.html5rocks.com/en/tutorials/audio/scheduling/
JAM with chrome case study
http://www.html5rocks.com/en/tutorials/casestudies/jamwithchrome-audio/
http://www.html5rocks.com/en/tutorials/casestudies/technitone/