bit touch of web audio api show a few examples created by the api

1. Web Audio APIで
インタラクションをもっとおもしろく
柳澤 佑磨
2014/10/11
HTML5飯 #3

2. About Me
• engineer (front-end)
• interested in..
• music
• new media art
• interaction design
• creative coding

3. Web Audio API
• Webで音を操作するためのAPI
• Browserだけ、Pluginいらない
• play, synthesize, filter(effects), record, etc..

4. Sample Code –Note On–
var context = new AudioContext();
function oscillate() {
oscillator = context.createOscillator(); //create sound source
oscillator.type = 1;
oscillator.frequency.value = 1000; // set frequency value
oscillator.connect(context.destination); // connect sound to context
oscillator.noteOn(0) //play instantly
}
oscillate();

5. Sample Code –Change Frequency–
$(window).scroll(function() {
var top = $(this).scrollTop();
changeFrequency(top);
});
function changeFrequency(aTop) {
oscillator = context.createOscillator();
oscillator.type = 1;
oscillator.frequency.value = aTop;
oscillator.connect(context.destination);
oscillator.noteOn(0);
}

6. Case 1 –Frequency Analysis–
• SoundCloud Visualizer
• src ( http://www.michaelbromley.co.uk/experiments/soundcloud-vis/#muse/undisclosed-desires )

7. Case 2 –Effects–
• Pedalboard.js
• Open-source JavaScript framework for developing audio effects with Web Audio API
• src ( http://dashersw.github.io/pedalboard.js/demo/ )

8. App –Timer–
while cooking..
‘G’note for 3s → pitch detection → start timer
• src( https://webaudiodemos.appspot.com/pitchdetect/index.html )

9. Compatibility Problems
src( http://caniuse.com/#feat=audio-api )

10. IE Support
• 次のIEではサポートする予定
• We’re also announcing a new set of features that are now In
Development for Internet Explorer, including:
• Web Audio
• src( http://blogs.msdn.com/b/ie/archive/2014/05/27/launching-status-modern-ie-amp-internet-explorer-platform-
priorities.aspx )

11. Future App –Web App like Reactable–
• src( img: http://biqfr.blogspot.jp/2010_10_03_archive.html | video: http://www.youtube.com/watch?v=MHeX6yg95xU )

12. Thank you :)