Web Audio API で遊ぼう録 3

前書き

WebAudioAPIでいろいろ再生したい。つづき。
前回
nanamedou-h.hatenablog.com

メモ

ローカルファイルの音楽再生

（略）
  <audio>
  </audio>
  <input id='fileInput' type='file' accept='audio/*'>
（略）

let fileInput = document.getElementById('fileInput')

function beginSoundFileMode(file) {
  let audioCtx = new window.AudioContext();

  let audioFileBlob = window.URL.createObjectURL(file)
  let music = new Audio(audioFileBlob)
  let sourceNode = audioContext.createMediaElementSource(music)

  sourceNode.connect(audioContext.destination)

  music.play()
}
fileInput.onchange = () => {
  beginSoundFileMode(fileInput.files[0])
}

ローカルファイルはhtml要素のinput type='input' でいけるっぽい。
この時filesの要素がfileの情報の配列になるので、これをの最初の要素をつかう。valueの値は無効なURLっぽい。
こやつ(files[0])を window.URL.createObjectURL() に入れるとファイルにアクセスできるURLができる。
これでめでたく、ローカルファイルが使えるようになった。
参考-MDN(https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/file)
あとは,このファイルがソースの Audio を新しく作成して、ソースノードを作ってお好みでつなげていくだけ。
ブラウザでパソコン内の曲が聞き放題だぜー。

エフェクトを作る

ホワイトノイズ

let whiteNoiseBuffer = audioCtx.createBuffer(1, 8000, 8000)
let nowBuf = whiteNoiseBuffer.getChannelData(0)
for (let i = 0; i < nowBuf.length; ++i) {
  nowBuf[i] = (Math.random() * 2 - 1)
}
whiteNoiseNode = audioCtx.createBufferSource()
whiteNoiseNode.buffer = whiteNoiseBuffer
whiteNoiseNode.loop = true
whiteNoiseNode.start()

[-1,1]のランダムな値を入れたバッファを再生するとラジオのノイズみたいなホワイトノイズができる。
これを

• 音源->中間ノードA->中間ノードB->出力
• ノイズ->中間ノードA

となるようにconnect()を呼んでいけばノイズをmixした音ができる。

エコー

ノードの設計を

• 音源->中間ノードA->中間ノードB->出力
• 中間ノードA->DelayNode->GainNode->中間ノードA

となるようにconnect()していくと、DelayNodeで設定しただけずれて、GainNodeで設定しただけだんだんと弱まっていく、エコーができる。

今日の成果

入力が増えた。
電波の悪いラジオみたいな音が鳴らせるようになった。

予定

見た目をよくしたい。

コード

GitHubで更新中(https://github.com/nanamedou/Web-Player)

続く…