The document discusses using the Web Audio API to make interactions on the web more fun. It provides examples of using the API to play and modify audio, including changing the frequency of an oscillator based on scroll position. It also presents cases using the API for audio analysis like a music visualizer, audio effects processing, and an app idea for pitch detection to start a timer while cooking inspired by the Reactable music production tool. It acknowledges some browser compatibility issues but hopes for future support in more browsers like Internet Explorer.

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 :)