Upgrade to Pro — share decks privately, control downloads, hide ads and more …

chiptune by web audio api

hiro-tan
October 13, 2016

chiptune by web audio api

hiro-tan

October 13, 2016
Tweet

More Decks by hiro-tan

Other Decks in Technology

Transcript

  1. 自己紹介 廣田洋平 a.k.a ひろたん ドリコム16 新卒入社 「 ちょこっとファー ム」 サー

    バー サイド 好きなジャンルはチップチュー ンとハピコア Web Audio の人と呼ばれるのを目指して修行中
  2. 波形を選択して音色を変える サイン波、 矩形波、 のこぎり波、 三角波の4 種 var audioContext = new

    AudioContext(); var oscillator = audioContext.createOscillator(); oscillator.type = "sine" //square, sawtooth, triangle oscillator.connect(audioContext.desination); oscillator.start(0); 簡単に音色を変えられる 4 種以外の波形は選べないほか、4 種の波形も デフォルトから変化させることはできない
  3. 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 に接続すると発生
  4. エンベロー プジェネレー ター を実装 エンベロー プジェネレー ター とは? 音量の時間変化を作り出す機能 Attack

    , Decay , Sutain , Release の4 つを設定 Attack : 音が鳴り始めかてら最大音量になるまで Decay : 最大音量からSustain までの減衰 Sustain : 音がなっているときの音量レベル Release : 音が鳴り止むまでの減衰 Duration : 音がなっている時間
  5. エンベロー プジェネレー ター を実装 oscillator にgain ノー ドを接続 gain ノー

    ドのパラメー ター を時間変化させる setValueAtTime(value, startTime) : startTime にパラメー ター をvalue に設定 linearRampToValueAtTime(value, endTime) : endTime にパラメー ター がvalue になるよう パラメー ター を線形変化 setTargetAtTime(target, startTime, timeConstant) : startTime からtimeConstant 分時間をかけて パラメー ター をtarget に変化
  6. エンベロー プジェネレー ター を実装 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);
  7. スイー プを実装 スイー プとは? 周波数を一定速度で変化させること SweepSwitch : off , positive

    , negative の3 種 SweepTime : 周波数を変化させる時間 バスドラムの音を再現するには 急激に周波数を上下させる
  8. スイー プを実装 周波数は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: }