Getting Started Web Audio API

Web Audio APIを使って音を出して、簡単なピアノ作ってみるところまで。
Meguro.es #5にて発表した内容です。

Transcript

1. Getting Started Web Audio API 廣田 洋平 @Drecom
2. We are hiring!
3. 自己紹介 廣田 洋平 (Yohei Hirota) ドリコム16 新卒入社 「 ちょこっとファー ム」 サー バー サイド
4. アジェンダ Web Audio API でピアノを作る Web Audio API で音を鳴らす テンポを変えて音を鳴らす 音の高さを変える UI コンポー ネントから音を鳴らす DEMO: https://hiro-tan.github.io/
5. Web Audio API で音を鳴らす DEMO: https://hiro-tan.github.io/osc.html // AudioContext のインスタンス生成 window.AudioContext = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContext(); // oscillator の設定 oscillator = audioContext.createOscillator(); oscillator.connect(audioContext.destination); oscillator.start(0);
6. テンポについて DEMO: https://hiro-tan.github.io/tempo.html ♩=120 1 分間に4 分音符が120 個 4 分音符1 個当たりの時間 = 0.5 秒 tempo = 120; crotchet = 60 / 120; // 4 分音符の長さ semibreve = crotchet * 4; // 全音符の長さ quaver = crotchet / 2; // 8 分音符の長さ // 8 分音符を鳴らす oscillator.start(0); oscillator.stop(audioContext.currentTime + quaver);
7. 音の高さを変える DEMO: https://hiro-tan.github.io/freq.html 音の基準 = 440Hz = ピアノの" ラ" // 整数を周波数に置き換える公式 function CaluculateFrequency(value) { return 440 * Math.pow(2, value / 12); } value = 0 ピアノの" ラ" value = -9 真ん中の" ド" value = 3 1 オクター ブ上の" ド"
8. 音の高さを変える DEMO: https://hiro-tan.github.io/freq.html oscillator = audioContext.createOscillator(); oscillator.frequency.value = 440; // default oscillator.connect(audioContext.destination); oscillator.start(0); oscillator.frequency.value = 261.63; // 再生中にも変更できる
9. Web Audio API でピアノを作る UI コンポー ネント: https://github.com/WebMusicDevelopersJP/webaud io-controls <webaudio-keyboard keys="25"></webaudio-keyboard>
10. Web Audio API でピアノを作る DEMO: https://hiro-tan.github.io/piano.html keyboard.addEventListener('change', function(e) { if(e.note[0]) { // 鍵盤が押された時の処理 console.log(e.note); // [1, 60] } else { // 鍵盤から離れた時の処理 console.log(e.note); // [0, 60] } }); 注意点 oscillator は一度stop すると削除される使い捨て仕様 和音などを表現するには鍵盤の数だけ変数が必要
11. 今日話さなかったこと ボリュー ムの変更 外部音声ファイルの読み込み フィルタ
12. Web Audio API のための勉強会 WebAudio.tokyo #1 @Drecom 9/6(Tue)