【p5.js】p5.sound の getSources() を使って複数のマイク入力のリストをシンプルに出力

タイトル通り p5.sound を使った内容です。

前に書いた以下の記事でも、今回と似たようなことをやっていました。
その際、p5.js Web Editor・p5.js を使ったものの、マイク入力の取得は JavaScript の「MediaDevices: enumerateDevices() メソッド」を使っていました。

●PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices） - Qiita
　https://qiita.com/youtoy/items/8339313b561c503ffe39

今回は、この部分を p5.sound を使った処理にしてみます。

試してみる

利用する処理

実際に試してみます。
p5.sound のリファレンス等を見てみたところ、以下の「getSources()」を使うのが良さそうです。
※ 前に書いた記事で使った「MediaDevices.enumerateDevices()」のラッパーとなるようです

●getSources
　https://p5js.org/reference/p5.AudioIn/getSources/

デバイスのリストをそのまま出力

マイク入力（や、他のオーディオ入力）のリストを単純に出力するだけなら、以下のシンプルな内容で実現できました。

function setup() {
  createCanvas(400, 400);
  const mic = new p5.AudioIn();

  mic.getSources((deviceList) => {
    console.log(deviceList);
  });
}

以下の書き方でも OK です。

function setup() {
  createCanvas(400, 400);
  const mic = new p5.AudioIn();

  mic.getSources(function (deviceList) {
    console.log(deviceList);
  });
}

上記を実行して得られた出力は、以下のとおりです。

デバイスのラベルのみを出力

次に、マイク入力（や、他のオーディオ入力）のリストの中の、ラベルのみを取得してみます。

上で書いたプログラムに、少しだけ手を加えました。

function setup() {
  createCanvas(400, 400);
  const mic = new p5.AudioIn();

  mic.getSources((deviceList) => {
    // console.log(deviceList);
    const labels = deviceList.map((device) => device.label);
    console.log(labels);
  });
}

これを実行すると、以下の出力が得られました。

ひとまず無事、p5.sound を使った情報取得・出力が行えました。