chiptune by web audio api

Transcript

1. Web Audio API を使って FC 音源を再現してみる 廣田洋平 @DRECOM
2. 自己紹介 廣田洋平 a.k.a ひろたん ドリコム16 新卒入社 「 ちょこっとファー ム」 サー バー サイド 好きなジャンルはチップチュー ンとハピコア Web Audio の人と呼ばれるのを目指して修行中
3. Join us! #2 11/8(tue) @Drecom
4. Join us! Web Audio API 初心者向けハンズオン 11/6(sun) @ 渋谷ヒカリエ
5. アジェンダ Web Audio API を使った音作り 波形を選択して音色を変える エンベロー プジェネレー ター を実装する スイー プを実装する
6. 波形を選択して音色を変える サイン波、 矩形波、 のこぎり波、 三角波の4 種 var audioContext = new AudioContext(); var oscillator = audioContext.createOscillator(); oscillator.type = "sine" //square, sawtooth, triangle oscillator.connect(audioContext.desination); oscillator.start(0); 簡単に音色を変えられる 4 種以外の波形は選べないほか、4 種の波形も デフォルトから変化させることはできない
7. ScriptProcessorNode の利用 JavaScript で音声デー タを編集できるノー ド var processor = audioContext.createScriptProcessor(1024); oscillator.connect(processor); // for iOS processor.onaudioprocess = function(event) { var buffer1 = event.outputBuffer.getChannelData(0); var buffer2 = event.outputBuffer.getChannelData(1); for(var i = 0; i < 1024; i++) { buffer[0] = buffer[1] = (Math.random() - 0.5) * 2; } }); processor.connect(audioContext.destination); onaudioprocess はdestination に接続すると発生
8. ScriptProceossorNode は廃止予定 代わりにAudioWorker が提案されたが… 実装されているブラウザはない 9 月の初めに仕様から削除 AudioWorklet に置き換えられる予定 しばらくはScriptProcessorNode を使いましょう
9. エンベロー プジェネレー ター を実装 エンベロー プジェネレー ター とは？ 音量の時間変化を作り出す機能 Attack , Decay , Sutain , Release の4 つを設定 Attack : 音が鳴り始めかてら最大音量になるまで Decay : 最大音量からSustain までの減衰 Sustain : 音がなっているときの音量レベル Release : 音が鳴り止むまでの減衰 Duration : 音がなっている時間
10. エンベロー プジェネレー ター を実装 oscillator にgain ノー ドを接続 gain ノー ドのパラメー ター を時間変化させる setValueAtTime(value, startTime) : startTime にパラメー ター をvalue に設定 linearRampToValueAtTime(value, endTime) : endTime にパラメー ター がvalue になるよう パラメー ター を線形変化 setTargetAtTime(target, startTime, timeConstant) : startTime からtimeConstant 分時間をかけて パラメー ター をtarget に変化
11. エンベロー プジェネレー ター を実装
12. エンベロー プジェネレー ター を実装 var t0 = audioContext.currentTime(); var t1 = t0 + attack; var t3 = t0 + duration - release; var envelope = audioContext.createGain(); oscillator.connect(envelope); envelope.connect(audioContext.destination); oscillator.start(t0); envelope.gain.setValueAtTime(0, t0); envelope.gain.linearRampToValueAtTime(1.0, t1); envelope.gain.setTargetAtTime(sustain, t1, decay); envelope.gain.setTargetAtTime(0, t3, release); oscillator.stop(t0 + duration);
13. スイー プを実装 スイー プとは？ 周波数を一定速度で変化させること SweepSwitch : off , positive , negative の3 種 SweepTime : 周波数を変化させる時間 バスドラムの音を再現するには 急激に周波数を上下させる
14. スイー プを実装 周波数はoscillator ノー ドのパラメー ター で設定 var current = oscillator.frequency.value; switch (sweepSwitch) { case positive: oscillator.frequency.setValueAtTime(current * 1.8, sweepTime); break; case negative: oscillator.frequency.setValueAtTime(current * 0.2, sweepTime); break; default: }
15. 参考資料 チップチュー ンを作ってみよう！ ドラム音色エディット編 -- くりおぺ http://www.tsurishi.info/chiptune-neiro-edit-drum/ WEB SOUNDER http://curtaincall.weblike.jp/portfolio-web-sounder/