4. アジェンダ
‣ イントロダクション
‣ 歴史
‣ Web audio api使うため必要な知識
‣ Web audio apiの紹介／構成
‣ デモタイム
‣ Web audio apiのライブラリ等を紹介
‣ 質問タイム
Friday, June 7, 2013
9. Web audio apiの歴史
•Google Chromeから始め
•OpenALを基づく
•2011 / 15 / 12 : First Draft
•2012 / 13 / 12 : 現在の版
Friday, June 7, 2013
11. ウェブでAudioの歴史？
‣ <bgsound> タグ (IE のみ！）
‣ 背景で音を鳴らす
‣ <bgsound src=”audio/welcome.wav” />
‣ フラッシュ
‣ <audio>タグ
‣ 実装簡単
‣ 簡単な音声制御できる
‣ Web audio API 登場！！！！
Friday, June 7, 2013
12. なぜWeb audio api要る？
• 複数データソースを用いて精密な時間制御
• Audioのパイプライン／ルーティング.
• Audioのストリームをフックして、オンザフ
ライで処理できる
Friday, June 7, 2013
16. まずはaudioデータをロード
function init() {
if (typeof AudioContext !== "undefined") {
context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
context = new webkitAudioContext();
} else {
throw new Error('AudioContext not supported. :(');
}
}
Friday, June 7, 2013
17. まずはaudioデータをロード
function init() {
if (typeof AudioContext !== "undefined") {
context = new AudioContext();
} else if (typeof webkitAudioContext !== "undefined") {
context = new webkitAudioContext();
} else {
throw new Error('AudioContext not supported. :(');
}
}
Friday, June 7, 2013
18. まずはaudioデータをロード
function startSound() {
// Note: this loads asynchronously
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function() {
var audioData = request.response;
context.decodeAudioData(audioData, function(buffer) {
playmusic(buffer)
}, onError);
};
request.send();
}
Friday, June 7, 2013
26. 処理ノードの種類
‣ GainNode (利得）
‣ BiquadFilterNode (フィルタ）
‣ PannerNode（３次元Audio操作）
‣ ConvolverNode（畳み込み）
‣ AnalyzerNode（分析）
‣ .......
Friday, June 7, 2013
31. 時間調整
Gun.prototype.shoot = function (type, rounds, interval, random,
random2) {
if (typeof random == 'undefined') {
random = 0;
}
var time = context.currentTime;
for (var i = 0; i < rounds; i++) {
var source = this.makeSource(this.buffers[type]);
source.playbackRate.value = 1 + Math.random() * random2;
source.noteOn(time + i * interval + Math.random() * random);
}
}
デーモ
Friday, June 7, 2013
35. ConvolverNode
function audioGraph(audioData) {
var convolver;
soundSource = context.createBufferSource();
soundBuffer = context.createBuffer(audioData, true);
soundSource.buffer = soundBuffer;
convolver = context.createConvolver();
soundSource.connect(convolver);
convolver.connect(context.destination);
Convolve('echo.mp3', convolver, function() {playSound()});
}
function Convolve(url, convolver, callback) {
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function () {
convolver.buffer = context.createBuffer(request.response, false);
callback();
}
request.send();
}
Friday, June 7, 2013
37. OscillatorでAudio生成(シンセシス）
var osc = audioctx.createOscillator();
var gain = audioctx.createGain();
osc.connect(gain);
gain.connect(audioctx.destination);
function Setup() {
if(play == 0) {
osc.start(0);
play = 1;
}
var type = document.getElementById("type").selectedIndex;
var freq = parseFloat(document.getElementById("freq").value);
var level = parseFloat(document.getElementById("level").value);
osc.type = type;
osc.frequency.value = freq;
gain.gain.value = level;
}
Friday, June 7, 2013
