An introduction of Web Audio API and their friends by explaining Web based sampler app for Firefox OS. This slide is for Firefox OS meeting at 2014/08/30 in Hiroshima, Japan.
11. 単純なオーディオグラフの作成例
• AudioContextオブジェクトのファクトリメソッドを利
用してオーディオノードを作成
• connectメソッドでノードを接続
• context.destination がスピーカー
11
var elm = document.querySelector("audio");!
!
var context = new AudioContext();!
var source = context.createMediaElementSource(elm);!
source.connect(context.destination);
12. 単純なオーディオグラフの作成例
12
source context.destination
var elm = document.querySelector("audio");!
!
var context = new AudioContext();!
var source = context.createMediaElementSource(elm);!
source.connect(context.destination);
13. フィルタの追加
13
source lowpass context.destination
var elm = document.querySelector("audio");!
!
var context = new AudioContext();!
var source = context.createMediaElementSource(elm);!
var lowpass = context.createBiquadFilter();!
lowpass.type = "lowpass";!
!
source.connect(lowpass);!
lowpass.connect(context.destination);
15. BiquadFilterNodeの使い方
• フィルタの種類はtype属性に名前を代入して指定
• frequency, Q, gain のパラメータを持つ
• パラメータの役割はMDNを参照してください
https://developer.mozilla.org/ja/docs/Web/API/BiquadFilterNode
15
var context = new AudioContext();!
var lowpass = context.createBiquadFilter();!
lowpass.type = "lowpass";!
lowpass.frequency.value = 2000;!
lowpass.Q.value = 30;
16. AudioParamオブジェクト
• パラメータを表すオブジェクト
https://developer.mozilla.org/docs/Web/API/AudioParam
• 例:BiquadFilterNodeオブジェクトのfrequency属性
• value と defaultValue の2つの属性を持つ
• タイミングにあわせた値設定なども可能
16
var context = new AudioContext();!
var lowpass = context.createBiquadFilter();!
lowpass.frequency.value = 2000;
17. ループを伴うグラフの作成
17
var elm = document.querySelector("audio");!
var context = new AudioContext();!
var source = context.createMediaElementSource(elm);!
!
var delay = context.createDelay();!
var wet = context.createGain();!
var dry = context.createGain();!
var feedback = context.createGain();!
!
source.connect(dry);!
dry.connect(context.destination);!
source.connect(delay);!
delay.connect(wet);!
wet.connect(context.destination);!
delay.connect(feedback);!
feedback.connect(delay);!
18. ループを伴うグラフ(つづき)
18
source
feedback delay dry
context.destination
wet
var source = context.createMediaElementSource(elm);!
var delay = context.createDelay();!
var wet = context.createGain();!
var dry = context.createGain();!
var feedback = context.createGain();
27. サンプリング(つづき)
• MediaStreamDestinationNode:
WebRTCでのストリーミング先を表すノード
27
var elm = document.querySelector("audio");!
var context = new AudioContext();!
var source = context.createMediaElementSource(elm);!
!
var mediaStreamDestination = !
context.createMediaStreamDestination();!
!
source.connect(context.destination)!
source.connect(mediaStreamDestination);
35. マイクの利用(つづき)
• GainNodeを挟むと、マイクの入力レベルをコントロールできる
35
var context = new AudioContext();!
function resolved(stream){!
var source = !
context.createMediaStreamSource(stream);!
var gain = context.createGain();!
source.connect(gain);!
gain.connect(context.destination);!
!
}
source gain context.destination
41. レファレンス
• Web Audio API の利用
https://developer.mozilla.org/ja/docs/Web/API/
Web_Audio_API/Using_Web_Audio_API
• Web Audio API
https://developer.mozilla.org/ja/docs/Web/API/
Web_Audio_API
• Web Audio Toy
http://uglyhack.appspot.com/webaudiotoy/
• Vocoder
http://webaudiodemos.appspot.com/Vocoder/
41