斜道倉庫

いろいろ遊んだことについて書いていく。

Web Audio API で遊ぼう録 2

前書き

WebAudioAPIでなんか作りたい記録。つづき。
前回(nanamedou-h.hatenablog.com)

メモ

マイク入力を実装する。

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

if (navigator.mediaDevices.getUserMedia) {
  // メディア使用権限取得
  navigator.mediaDevices.getUserMedia(
    {
      audio: true,
      video: false
    }).then((stream) => {

      /* ノードを作成する */
      let sourceNode = audioCtx.createMediaStreamSource(stream)

      /* ノードを接続する */
      sourceNode.connect(audioCtx.destination)

    }).catch((err) => {
      console.log('メディア初期化に失敗しました。: ' + err)
    })
} else {
  console.log('navigator.mediaDevices.getUserMedia がサポートされていません。')
}

 こんな感じで初期化できる。chromeだと初期化はユーザー入力イベント中じゃないとダメみたい。

ビジュアライザを作る

 Canvas API っていう2D描画が楽にできるAPIがあった。これを使う。
参考

今日の成果

f:id:nanamedou:20181224130833p:plain
虹色

予定

 ローカルディレクトリににある音楽を再生できるようにする。