JavaScriptで音声の出力先を変えたい
先日のUGでもみんな気になってる感じがあり、個人的にも気になっており、現状をまとめておこうかと思い。
`setSinkId()`について
const devices = await navigator.mediaDevices.enumerateDevices(); const [{ deviceId }] = devices.filter(device => device.kind === 'audiooutput'); const $audio = document.createElement('audio'); await $audio.setSinkId(deviceId);
というように、`deviceId`を指定して、その要素の出力先を変えられるAPIがいちおう存在します。
入力を変えるのに`getUserMedia()`を使うので、その反対って感じ。
`enumerateDevices()`で、`kind`が`audiooutput`なものが返ってくるので、それを使う。
ちなみにこいつらはまとめて「Audio Output Devices API」といいます。
`HTMLMediaElement.prototype.setSinkId()`なので、`audio`でも`video`でも使える。
肝心のブラウザサポートは？
Chromeでしか動かない問題
幸か不幸かChromeでは実装されてるので、他のブラウザの利用者から「なんでできないの？」って言われる問題。
このAPIに限らず、ブラウザAPIではあるあるネタであり昔からずっとあるやつです。
これは機能をリリースする前に各ブラウザの互換性を調べるしかなくて、Polyfillもできないのであればすっぱり諦めるくらいがよいかなと思ってます。どうしようもないので。
まぁブラウザではなくOSの設定を変えればよいという話ではあるので、そこをUIでなんとかできなくも・・ない・・？
Bluetoothヘッドセット問題 その1
マイクだけ認識される問題。
たとえばFirefoxとかで、Bluetoothヘッドセットをつないだ状態で、`enumerateDevices()`する。
すると、`audioinput`にそれが現れるので、`getUserMedia()`で利用ちゃう、みたいなケース。
- 入力: ヘッドセット
- 出力: 本体スピーカー
というちぐはぐな状態になってしまう。
対策としてはやはり、
このへんは要件次第ってやつよね・・。
