PC で利用できるマイクなどのオーディオ入力のリストを p5.js Web Editor上で見てみる（ブラウザの MediaDevices） #JavaScript

過去に、以下の記事を書いた際にやった内容の、マイクバージョンというような内容です。

●p5.js で利用する内蔵／Webカメラ映像を特定のデバイス名のものに設定する（配列メソッドと MediaDevices.enumerateDevices() を利用） - Qiita
　https://qiita.com/youtoy/items/a77d193fcd50a8151f17

オーディオの入力を、JavaScript の処理で取得してみるというものです。それを p5.js Web Editor上で行ってみます。

オーディオの入力のリストを確認する

既存の Webサイトで確認する

まずは、既存の Webサイトを使い、オーディオの入力のリストを確認してみます。

例えば WebRTC samples のマイクなどが使われるサンプルで、以下などを別タブで開いてみます。

●Select audio and video sources
　https://webrtc.github.io/samples/src/content/devices/input-output/

自分の場合は、オーディオの入力ソースとしてバーチャルなものを含め、11個がリストに出てきました。

JavaScript のプログラムで確認する

今度は JavaScript のプログラムで確認してみます。

具体的には、以下を用います。

●MediaDevices: enumerateDevices() メソッド - Web API | MDN
　https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/enumerateDevices

処理のベースは、以下となります。

navigator.mediaDevices.enumerateDevices().then((devices) => {
  // console.log(devices);
  console.log(devices.filter((device) => device.kind === "audioinput"));
});

p5.js Web Editor上で確認してみる

上記の処理を使って、p5.js Web Editor上で確認してみます。

少し処理を足して、以下のようにしました。

sketch.js

function setup() {
  createCanvas(400, 400);

  navigator.mediaDevices.enumerateDevices().then((devices) => {
    // console.log(devices);

    const inputList = devices.filter((device) => device.kind === "audioinput");
    console.log(inputList);

    const labels = inputList.map((device) => device.label);
    console.log(labels);
  });
}

デバイスの名前が出てくる部分を出力する処理も足してみました。

コンソールの出力は、以下となりました。

事前に確認していた 11個のオーディオ入力が、同様に情報出力されるのを確認できました。

余談

今回の話と直接は関係ないですが、カメラ・オーディオ入力つながりという内容なので、余談として以下を紹介してみます。

●Chrome で利用可能なカメラの解像度・フレームレートやデバイス名を手軽に確認する（＋余談）：「chrome://media-internals/」 - Qiita
　https://qiita.com/youtoy/items/bfc5325d118dad11e1d7

●Chrome で PC に接続されたマイクなどの情報を手軽に確認する（ chrome://media-internals/ ） - Qiita
　https://qiita.com/youtoy/items/5a0660f9cffef58333fe

これらは、Chrome上でカメラやオーディオ入力のパラメータなどを簡単に確認できる、という話です。