Kayac Lightning-Talk | Interaction Design with Web Audio API
-
Upload
yuma-yanagisawa -
Category
Presentations & Public Speaking
-
view
126 -
download
4
description
Transcript of Kayac Lightning-Talk | Interaction Design with Web Audio API
Web Audio APIで インタラクションをもっとおもしろく
柳澤 佑磨
2014/10/11 HTML5飯 #3
About Me
• engineer (front-end)
• interested in..
• music
• new media art
• interaction design
• creative coding
Web Audio API
• Webで音を操作するためのAPI
• Browserだけ、Pluginいらない
• play, synthesize, filter(effects), record, etc..
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();
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);
}
Case 1 –Frequency Analysis–
• SoundCloud Visualizer
• src ( http://www.michaelbromley.co.uk/experiments/soundcloud-vis/#muse/undisclosed-desires )
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/ )
App –Timer–
• src( https://webaudiodemos.appspot.com/pitchdetect/index.html )
‘G’note for 3s → pitch detection → start timer
while cooking..
IE Support
• 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 )
• 次のIEではサポートする予定
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 )
Thank you :)