Closed6

m1 mac で audio loopback して、macで再生中の音をブラウザで使用する

いすみいすみ

m1 mac で再生されている音をステレオミキサーのようにしてブラウザに読み込ませたい。
モチベとしては、p5jsで使えるようにしてサウンドビジュアライザーを作りたい。

いすみいすみ

設定手順(記憶で書き起こし)

install

brew install blackhole-2ch

設定

https://github.com/ExistentialAudio/BlackHole#record-system-audio の手順通り

完了状態

補足

  • LGULTRAGEAR: 普通に音を聞くためのデバイス
    (事情がありモニターのサウンドポートを使っている)
  • BlackHole: 今回追加する仮想デバイス

手順

  • Use Spotlight command+space and type Audio Midi Setup
  • 左下の + を押して 複数出力装置を作成
  • 音を聞きたいデバイスとblackholeの「使用」のチェックボックスにチェックを入れる
    • チェックを付け外しすると順番が変わるので、音を聞きたい方を上、blackholeを下にする
    • blackholeは音ずれ補正のチェックも入れる
    • マスター装置を音を聞きたいデバイスにする
  • 「複数出力装置」を右クリックしてこのサウンド出力装置を使用
いすみいすみ

動作確認

サウンドの出力デバイスに「複数出力装置」を指定

ブラウザでデバイスを取得してみる

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

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

結果


先にマイクの使用許可を取らないと実際のデバイスが取得できない

先に使用許可を取る

navigator.mediaDevices.getUserMedia({ audio: true })

https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia

BlackHoleのデバイスが取得できている！

いすみいすみ

p5jsでblackholeを使う

let audioIn;

function setup() {
  let cnv = createCanvas(200, 200);
  cnv.mousePressed(initAudioIn);
}

function draw() {
  background(200);
  if (!!audioIn && !!audioIn.currentSource) {
    text(audioIn.getLevel(), width / 2, height / 2);
  }
}

function initAudioIn() {
  audioIn = new p5.AudioIn();
  audioIn.getSources((devices) => {
    const blackhole = devices.findIndex((d) => {
      return d["label"] == "BlackHole 2ch (Virtual)";
    });
    audioIn.setSource(blackhole);
    audioIn.start();
  });
}

動くサンプル
https://editor.p5js.org/izm51/sketches/Ban1Glp2D

メモ

  • setup() で initAudioIn() を呼ぶとうまく取得できなかった。
  • mousePressed() をトリガーにすることで動作するようになった。
  • Sourceを明示的に指定しないとmacbookのマイクが優先されてしまったりした。
このスクラップは2021/09/12にクローズされました