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

Playing with WebAudio

Playing with WebAudio

ブラウザJavascriptを使って簡単な作曲環境を作りました

Avatar for Akira Morikawa

Akira Morikawa

April 23, 2018
Tweet

More Decks by Akira Morikawa

Other Decks in Technology

Transcript

  1. Playing with OscillatorNode var audioContext = new AudioContext(); var masterGain

    = audioContext.createGain(); //Gain: 音量 var oscillator = audioContext.createOscillator(); //Oscillator: 波形生成 oscillator.connect(masterGain); masterGain.connect(audioContext.destination); oscillator.start(audioContext.currentTime); #1 初期化する
  2. Playing with OscillatorNode masterGain.gain.value = 1.0; //ボリューム: 0.0~1.0 oscillator.frequency.value =

    440; //音階(Hz): 0~1000 oscillator.type = ‘sawtooth’; //波形種類: sine | square | sawtooth | triangle | custom oscillator.start(); #2 音を出してみる frequency=440 → A音:音階を変えるには? 440 * Math.pow(2, n/12);
  3. Playing with OscillatorNode #3 曲を作って再生してみた - 音階を設定して音を鳴らす - setTimeout()で指定時間待ってから次の音出す -

    音を止める時はgain=0にすればいいよね - 鳴らす音のリストは配列作ってループさせよう
  4. Playing with OscillatorNode var scores = [{note:60, size:1}, {note:62, size:1},

    ...]; var sound = scores.shift(); scores.length > 0 play( sound ); Fin
  5. Other Nodes Node Description BiquadFilter バンドパス / バンドシェル ... (Equalizer,

    Phaser, Wah, ...) ChannelSplitter / ChannelMerge チャンネルを分割・結合する Compressor 音量をそろえる Convolver 空間反響させる(Reverb) Delay 音を遅延させる(Chorus, Flanger, ...) Gain 音量を変化させる(Tremolo) Panner 音の位置を変える WaveShaper 音を歪ませる(Distortion, Overdrive, Fuzz, ...)