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..

Compatibility Problems

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

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