Web Audio API
and
Web MIDI API

Web Music Hackathon #4 @Kyoto

2015/07/25 aike

誰?

@aike1000

こんなもの作ってます

Web Audio Synth

aikelab.net/websynth

PG01Web

aikelab.net/pg01

Web Audio APIすごい

  • 音声信号処理が普通にできる
  • JavaScriptから触れるものはすべて
    連携できる
    Web API、Canvas、WebGL、加速度センサー、etc...
  • スマホでも動く

Twitter APIとの連携

beatonica.com

加速度センサーとの連携

aikelab.net/iphonewah

加速度センサーとの連携

aikelab.net/sw
/*
 * 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 //////////////////////

WebGLとの連携

aikelab.net/websynthv2

MIDI

楽器同士専用ケーブル
連携するプロトコル

だけじゃない!

not only A but also B

現代のMIDIは
IoT向け汎用プロトコル

  • USBでもつながる
  • Bluetooth LEでもつながる
  • 照明CGを制御したり
  • ArduinoRaspberry Piと連携したり

現代のMIDIは
IoT向け汎用プロトコル

  • シンプル
  • 枯れた技術
  • 膨大な対応ハードウェア
  • フルスタックプロトコル

Web MIDI APIの場合


  • 楽器からブラウザへメッセージ送信
  • ブラウザから楽器へメッセージ送信

と、いうことは

tsumari

Web MIDI APIブラウザから
近くのマシンのブラウザ
メッセージ送信ができる!!

たとえば
このプレゼン資料
Web MIDI API
iPhoneから操作してます

Web MIDI APIでプレゼン操作

github.com/aike/midisentation

Web Audio API
and
Web MIDI API


使い方はアイデア次第!