[Htmlday]present4. アジェンダ
‣ イントロダクション
‣ 歴史
‣ 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(3次元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