Web Audio API でお手軽10バンドイコライザー

5271501ec0f006c05ab1b87bec2a5d40?s=47 hiro-tan
September 08, 2016

Web Audio API でお手軽10バンドイコライザー

WebAudio.tokyo #1 で発表した資料です。

5271501ec0f006c05ab1b87bec2a5d40?s=128

hiro-tan

September 08, 2016
Tweet

Transcript

  1. Web Audio API で お手軽10 バンドイコライザー 廣田 洋平 @DRECOM

  2. We are hiring!

  3. Join us! #6 @DRECOM 10/13(thu)

  4. 自己紹介 廣田 洋平 (Yohei Hirota) ドリコム16 新卒入社 「 ちょこっとファー ム」

    サー バー サイド Web Audio API 歴3 ヶ月とちょっと 作ったもの https://hiro-tan.github.io/
  5. アジェンダ Web Audio API でイコライザー を作る イコライザー とは? Web Audio

    API で音声ファイルを読み込む 音声にフィルタをかける Web Audio API におけるのノー ドの概念 webaudio-controls を使ってみる
  6. イコライザー とは? 音声信号の周波数特性を変更する音響機器 wikipedia「 イコライザー ( 音響機器)」 より ある特定の周波数帯域の波形を強調 /

    減少させて 音作りを行うこと 周波数帯域をバンドという 10 バンド 10 箇所調整できる
  7. DEMO https://hiro-tan.github.io/equalizer.html

  8. 音声ファイルを読み込む var context = new AudioContext(); var buffer = null;

    loadSound("path/to/source") var source = context.createBufferSource(); source.buffer = buffer; source.connetct(context.destination) source.start(0) function loadSound(url) { var req = new XMLHttpRequest(); req.open("GET", url, true); req.responseType = "arraybuffer"; req.onload = function() { context.decodeAudioData(req.response, function(b) { buffer = b; }, function() {}); } req.send(); }
  9. 音声にフィルタをかける Web Audio API では音を作る部分と 音を鳴らす部分を分けて考える パソコンとスピー カー のような関係 buffer

    destination この間にフィルタのノー ドを挟む buffer filter destination
  10. 音声にフィルタをかける var source = context.createBufferSource(); var filter = context.createBiquadFilter(); filter.type

    = "peaking"; filter.frequency.value = 440; filter.gain.value = 10; // 中略 source.buffer = buffer; source.connect(filter); filter.connect(context.destination); source.start(0);
  11. まとめ 少ないコー ド量で音作りが楽しめる 変更がリアルタイムかつシー ムレスに反映される どのノー ドをどう繋ぐかは音楽の知識が必要 本格的にやろうとすると結構頭使う