SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
1.
WebAudioAPI
実践的
プログラミング
Practical Web Audio API Programming
藍 圭介 小樽商科大学
Ai Keisuke @aike1000
2013.11.30
CC BY Temari 09 http://www.flickr.com/photos/34053291@N05/4658010136/
15.
ウェブブラウザが
直接サポートする
音声信号処理API
CC BY-ND Hector Lazo http://www.flickr.com/photos/hector-lazo/3101873296/
16.
Web Audio API
•音そのものをJavaScriptで直接操作
•プラグイン不要で環境依存しにくい
•由緒正しい(W3C)
注目度が高く進化が速い
•
CC BY-ND Hector Lazo http://www.flickr.com/photos/hector-lazo/4109744948/
38.
波形を直接加工する
ScriptProcessor
CC BY-NC thaths http://www.flickr.com/photos/thaths/5852964925/
39.
みんな大好きディストーション
波形をブーストしてからクリップ
var fuzz = ctx.createScriptProcessor(1024, 1, 1);
fuzz.onaudioprocess = function(event) {
var sin = event.inputBuffer.getChannelData(0);
var sout = event.outputBuffer.getChannelData(0);
var limit = 0.2;
for (var i = 0; i < sin.length; i++) {
var sig = sin[i] * 6;
// Boost
if (sig > limit) sig = limit;
// Clip
if (sig < -limit) sig = -limit;
// Clip
sout[i] = sig;
}
};
http://aikelab.net/webaudodemo/fuzz/
40.
FFTでピッチチェンジャー
var pshift = function(val, indata) {
this.fft.forward(indata);
for (var i = 0; i < stream_length; i++) {
a_real[i] = 0;
a_imag[i] = 0;
}
for (var i = 0; i < stream_length; i++) {
var index = parseInt(i * val);
var eq = 1.0;
if (i > stream_length / 2) {
eq = 0;
}
if ((index >= 0) && (index < stream_length)) {
a_real[index] += fft.real[i] * eq;
a_imag[index] += fft.imag[i] * eq;
}
}
return this.fft.inverse(this.a_real, this.a_imag);
}
pitchShifter.onaudioprocess = function(event) {
var sin
= event.inputBuffer.getChannelData(0);
var sout
= event.outputBuffer.getChannelData(0);
var data = pshift(2.0, sin);
for (var i = 0; i < sin.length; i++) {
sout[i] = data[i];
}
};
DSP.js by cobanbrook
https://github.com/corbanbrook/dsp.js/
http://aikelab.net/webaudiodemo/pitch/
41.
はまりやすい
落とし穴
CC BY-NC-SA @notnixon http://www.flickr.com/photos/sansbury/3274031514/
44.
ベンダープレフィックス問題
var ctx = new webkitAudioContext();
var ctx = new AudioContext();
window.AudioContext
= window.AudioContext || window.webkitAudioContext;
var ctx = new AudioContext();
60.
簡易シーケンサーの作成 (完成版)
全部鳴らす
var drum = new Drum(ctx);
var bass = new Bass(ctx);
var synth = new Synth(ctx);
var play = function() {
var t = ctx.currentTime;
for (var i = 0; i < 128; i++) {
t += 0.1;
drum.play(i, t);
bass.play(i, t);
synth.play(i, t);
}
}
http://aikelab.net/webaudiodemo/seq7/