WebAudioToy
May 23, 2012
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
This is kind of a toy or explorer thingy using various HTML5 techniques which lets you play with Web Audio API. It can play and generate audio, record audio from the microphone (though browser support is still non-existent), create audio using text-to-speech and apply different kinds of effects. You can also do javascript processing to audio in realtime. It supports drag n drop to play your local files and also visualizes the audio output.
Technology:
HTML5, javascript, Web Audio API, Canvas, drag n drop, local storage, css3, speak.js, WebRTC (getUserMedia)
Comments
Very good.
Reply to this commentVery cool. Wish I could type in the osc frequency value, as I can't seem to ge the slider to stop on 440
Reply to this commentEs Genial! Puedo descargar lo que hice? es decir, con la música incluida? Espero una respuesta, gracias por su tiempo. Saludos desde Argentina.
Reply to this commentVery cool Daniel. I can't seem to get anything from my microphone though (using latest stable Chrome). Any tips on getting this to work? I can make WebRTC audio/video calls using other demos. Thanks again.
Reply to this commentHere's Mine:
Reply to this commenthttp://uglyhack.appspot.com/webaudiotoy/?data=eyJub2RlcyI6W3siaSI6MSwic24iOiJkc3RuIiwiZCI6eyJ2bSI6MH0sInAiOnsidG9wIjoyOTkuNSwibGVmdCI6MTA4MH0sImMiOltdfSx7ImkiOjE4LCJzbiI6InNvbiIsImQiOnsicHIiOjIuMjV9LCJwIjp7InRvcCI6Mjg2LCJsZWZ0IjozNjd9LCJjIjpbMSwyMiwyMywyNCwyNSwyNl19LHsiaSI6MjIsInNuIjoiY24iLCJkIjp7ImNvbnYiOiJzMl9yNF9iZCIsIm5vcm0iOnRydWV9LCJwIjp7InRvcCI6NjM3LCJsZWZ0Ijo2NTd9LCJjIjpbMV19LHsiaSI6MjMsInNuIjoic2NuIiwiZCI6eyJjIjoiZm9yICh2YXIgaSA9IDA7IGkgPCBpbnAubGVuZ3RoOyBpKyspIHtcbiBvdXRbaV0gPSBpbnBbaV07XG59In0sInAiOnsidG9wIjo4NiwibGVmdCI6NzA5fSwiYyI6WzFdfSx7ImkiOjI0LCJzbiI6IndzbiIsImQiOnsiY3UiOlswLDAuMDUsMC4xLDAuMTUsMC4yLDAuMjUsMC4zLDAuMzUsMC40LDAuNDVdfSwicCI6eyJ0b3AiOjU4MiwibGVmdCI6MzEzfSwiYyI6WzFdfSx7ImkiOjI1LCJzbiI6ImFuIiwiZCI6eyJ2bSI6MX0sInAiOnsidG9wIjo4MSwibGVmdCI6MzU3fSwiYyI6WzFdfSx7ImkiOjI2LCJzbiI6ImRjbiIsImQiOnsidCI6LTI0LCJrIjozMCwicmF0IjoxMiwiYSI6MC4xLCJyZWwiOjAuMjV9LCJwIjp7InRvcCI6NDExLCJsZWZ0Ijo4OTB9LCJjIjpbMV19XX0=
Nice!
Reply to this commentI'm having fun with this, especially the javascript panel. If you have an understanding of javascript you can get real creative with the possibilities. It could use some documentation to explain what the sample rate is, and the javascript sample buffer size.
Reply to this commentGreat Experiment! +1 for not obfuscating the source code!
Reply to this commentWrave: To delete a connection line, just click on it. To delete a node, click the X. It was a little difficult to to delete connection lines because they are so thin and not easy to click on. But that is fixed now by not having to click exactly on the line.
Reply to this commentOkay. SO this works in Canary well. The audio manipulation and visualization parts are good, but the node-based interface is the thing that needs polish. I couldn't figure out how to delete connections. Correcting mistakes, continually changing a patch is essential to sound design workflow. Spend a little time on that part so that we can "play" with it more. RIght now it feels like a one-shot deal.
Reply to this commentMizar: Oscillators are currently only available in dev or canary builds of chrome/chromium. But they will start working once stable catches up. =)
Reply to this commentVery good. But my linux chromium says 'Not supported by your browser' when using oscillators.
Reply to this comment