Web Audio API
Creative Coding

Web Music Developer Meetup @Sapporo

25 Oct. 2015 aike

Who?

@aike1000

github.com/aike

Web Audio Synth

aikelab.net/websynth (2012)

PG01Web

aikelab.net/pg01 (2012)

Web Audio API
Web MIDI API

  • ブラウザで音楽を演奏
  • ブラウザで楽器を操作
  • Play music in the web browser
  • Control musical instruments in the web browser

だけじゃない!

not only A but also B

表現メディアのプラットフォーム
Platform of Interactive Art

  • 自動作曲プログラミング
  • インタラクション
  • 各種ウェブ技術との連携
  • Algorithmic composition
  • Interaction
  • Easy to combine with other web technologies

Web Audio + Algorithmic composition

aikelab.net/tarai

Web Audio + Twitter API

beatonica.com (2012)

Web Audio + Accelerometer

github.com/aike/iphonewah

Web Audio + Accelerometer

github.com/aike/lightsaber.js
/*
 * lightsaber.js
 * MIT licensed
 * Copyright (C) 2015 aike, http://github.com/aike
 */

/*window.onerror = function(error) {
    alert(error);
};
*/

var mousedown, mouseup;
if ("ontouchstart" in window) {
  mousedown = "touchstart";
  mouseup = "touchend";
} else {
  mousedown = "mousedown";
  mouseup = "mouseup";
}


var handle = document.querySelector("#handle");
var beam = document.querySelector("#beam");

handle.style.left = ((window.innerWidth - 30) / 2) + "px"; 
beam.style.left = ((window.innerWidth - 20) / 2) + "px"; 


var beamOn = false;
var beamMax = 360;
var beamLen = 0;
beam.style.top = (400 - beamLen) + "px";
beam.style.height = beamLen + "px";

var cnt = 0;
var beamanim = function() {
  if (beamOn) {
    if (beamLen < beamMax) {
      beamLen += 30;
      beam.style.top = (400 - beamLen) + "px";
      beam.style.height = beamLen + "px";
    }
  } else {
    if (beamLen > 0) {
      beamLen -= 30;
      beam.style.top = (400 - beamLen) + "px";
      beam.style.height = beamLen + "px";
    }
  }
}
setInterval(beamanim, 20);
handle.addEventListener(mousedown, function(){beamOn = true;});
handle.addEventListener(mouseup,   function(){beamOn = false;});

var ctx = new webkitAudioContext();
var gain = ctx.createGain();
gain.gain.value = 0.5;
var gainBase = 0.3;
var lpf = ctx.createBiquadFilter();
lpf.type = "lowpass";
lpf.frequency.value = 2000;
var delay = ctx.createDelay();
delay.delayTime.value = 0.2;
var feedback = ctx.createGain();
feedback.gain.value = 0.3;
var wet = ctx.createGain();
wet.gain.value = 0.2;
gain.connect(lpf);
lpf.connect(delay);
delay.connect(feedback);
feedback.connect(delay);
lpf.connect(ctx.destination);
delay.connect(wet);
wet.connect(ctx.destination);

var osc = null;

handle.addEventListener(mousedown, function(){
  osc = ctx.createOscillator();
  osc.type = "sawtooth";
  osc.frequency.value = 90;
  osc.connect(gain);
  osc.start(0);
});

handle.addEventListener(mouseup, function(){
  osc.stop(0);
  osc = null;
});

setInterval(function() {
  gain.gain.value = gainBase + (gainBase * Math.random() * 0.2);
}, 100);

window.addEventListener("devicemotion", function(e) {
  var ac = e.acceleration;
  mag = ac.y;
  gainBase = Math.min(Math.max(mag / 10, 0.05), 1);

  if (osc != null)
    osc.frequency.value = 90 + mag * 0.1;

});
/////////////////// END OF CODE //////////////////////

Web Audio + WebGL

aikelab.net/websynthv2

Creative Coding

Creative Coding

  • プログラムで生成するサウンド・ビジュアル表現
  • インタラクティブ・アート
  • ジェネラティブ・アート
  • Creating sound and visual art by programming
  • Interactive Art
  • Generative Art

Creative Coding School in Sapporo
08-23 Aug. 2015

Sound and Visual programming workshop

  • Processing
  • Max
  • OpenFrameworks
  • JavaScript !!!

Web Audio + Canvas

aikelab.net/ccss2015/advanced/6_canvas/

まとめ

Web APIの進化によりウェブブラウザは
表現メディアのプラットフォームとして
十分な能力を持ちはじめた

Web browser is a platform of interactive art

全部JSでここまでできる!


All your base are belong to JS!