diff --git a/src/components/AudioOutputSelect/AudioOutputSelect.tsx b/src/components/AudioOutputSelect/AudioOutputSelect.tsx index bc3af56bd..c8dee69b0 100644 --- a/src/components/AudioOutputSelect/AudioOutputSelect.tsx +++ b/src/components/AudioOutputSelect/AudioOutputSelect.tsx @@ -19,12 +19,12 @@ export default function AudioOutputSelect(props: Props) { useEffect(() => { const refreshDevices = async () => { try { - // Webkit sucks, we need to request permissions for inputs, when we only - // need outputs - // const test = await navigator.mediaDevices.getUserMedia({ - // audio: true, - // video: false, - // }); + // This will display a popup to users asking them to give microphone access, + // which is lame because we only need outputs. + // Does not work on macOS/linux for now. + await navigator.mediaDevices.getUserMedia({ + audio: true, + }); const devices = await navigator.mediaDevices.enumerateDevices(); const audioDevices = devices.filter( (device) => device.kind === 'audiooutput' && device.deviceId !== '', diff --git a/src/lib/player.ts b/src/lib/player.ts index f68c398c0..552c30aaf 100644 --- a/src/lib/player.ts +++ b/src/lib/player.ts @@ -37,9 +37,14 @@ class Player { this.track = null; this.audio.defaultPlaybackRate = mergedOptions.playbackRate; - // @ts-ignore - // TODO: - // this.audio.setSinkId(mergedOptions.audioOutputDevice); + + // FIXME: this will not do anything unless we recall getUserMedia() + if ('setSinkId' in this.audio) { + // eslint-disable-next-line + // @ts-ignore + this.audio.setSinkId(mergedOptions.audioOutputDevice); + } + this.audio.playbackRate = mergedOptions.playbackRate; this.audio.volume = mergedOptions.volume; this.audio.muted = mergedOptions.muted;