Playing with WebAudio

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

Transcript

1. WebAudioで遊んでみた 2018. 04. 27 ariaki // ブラウザ Javascript が面白い件
2. WebAudio 知ってる人いる？
3. What’s WebAudio HTML5 Multimedia Audio Video
4. AudioContext AudioContext MediaElement MediaStream Source Destination Oscillator
5. Oscillator を使って 遊んでみよう
6. Purpose 着メロ的なやつを鳴らしてみよう ① とりあえず音を出す ② 音階を変える ③ 音の長さや速度を変える ④ メロディを作れる ⑤ 時間の都合上、単音でやる ⑥ なんか面白い感じにする
7. 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 初期化する
8. Playing with OscillatorNode AudioContext Oscillator Gain (connect) (connect) Destination (create)
9. 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);
10. Playing with OscillatorNode #3 曲を作って再生してみた - 音階を設定して音を鳴らす - setTimeout()で指定時間待ってから次の音出す - 音を止める時はgain=0にすればいいよね - 鳴らす音のリストは配列作ってループさせよう
11. Playing with OscillatorNode var scores = [{note:60, size:1}, {note:62, size:1}, ...]; var sound = scores.shift(); scores.length > 0 play( sound ); Fin
12. https://ariaki.info/webaudio Demonstration
13. WebAudio 他にもいろんな機能があるよ
14. Other Nodes Node Description BiquadFilter バンドパス / バンドシェル ... （Equalizer, Phaser, Wah, ...） ChannelSplitter / ChannelMerge チャンネルを分割・結合する Compressor 音量をそろえる Convolver 空間反響させる（Reverb） Delay 音を遅延させる（Chorus, Flanger, ...） Gain 音量を変化させる（Tremolo） Panner 音の位置を変える WaveShaper 音を歪ませる（Distortion, Overdrive, Fuzz, ...）
15. Other Nodes Node Description Analyzer 信号のスペクトラム情報を取得する ScriptProcessor 生の音声バッファ（バイナリ）を取得する
16. Other Nodes まとめ - 音源はたくさん（マイク・ファイル・オシレータから生成） - 多彩なエフェクタを使って加工できる - アナライザを使ってスペクトル可視化できる - 編集結果を出力/保存できる
17. これからは JS で作曲する時代 # 昔CALで書いてた人
18. Thank You For Your Attention !