Last active
December 30, 2023 00:10
-
-
Save kyab/d55b0791b903ded6e7916a7c7129475c to your computer and use it in GitHub Desktop.
How to change Audio Output Device on Youtube (Chrome)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//References | |
/* | |
https://webrtc.github.io/samples/src/content/devices/multi/ | |
https://www.youtube.com/html5?gl=JP&hl=ja | |
https://webrtc.github.io/samples/src/content/getusermedia/gum/ | |
https://www.youtube.com/html5?gl=JP&hl=ja | |
Audio Output Devices API | |
https://www.w3.org/TR/audio-output/#htmlmediaelement-extensions | |
https://www.chromestatus.com/feature/4621603249848320 | |
https://developers.google.com/web/updates/2015/10/media-devices | |
*/ | |
//Steps. | |
/* | |
A:Get permission required to use setSinkId() (change output device) at first. | |
to do this, use navigator.mediaDevices.getUserMedia() to get permission from user. | |
unless this process setSinkId() raise permission error. | |
B:Use navigator.mediaDevices.enumerateDevices() to enumerate devices. | |
C:Find video elements and call setSinkId() for deviceId found in B. | |
*/ | |
///////////////////////////// | |
//sample console input in youtube. | |
//////////////////////////// | |
constrains = {audio:true, video:true} | |
navigator.mediaDevices.getUserMedia(constrains) | |
gotDevices = function(deviceInfos) { | |
for (var i = 0; i !== deviceInfos.length; ++i) { | |
var deviceInfo = deviceInfos[i]; | |
if (deviceInfo.kind === 'audiooutput') { | |
console.info('Found audio output device: ', deviceInfo.label, deviceInfo.deviceId); | |
} else { | |
console.log('Found non audio output device: ', deviceInfo.label,deviceInfo.deviceId); | |
} | |
} | |
} | |
navigator.mediaDevices.enumerateDevices().then(gotDevices) | |
//now callback will show device names and deviceId. | |
v = document.getElementsByTagName("video")[0] | |
v.sinkId | |
v.setSinkId("a418acde582382574452caf2d51df1a78e7f1d2f65e5e5c129d26ed7850317a9") | |
v.sinkId | |
Since neither Youtube, nor any browser provides a way to change output device this is very useful. I get that this is extremely niche case, but come on, everything but UI is already there. Thank you for sharing this!
@Domin6o thanks!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The script didn't work to me, but I was using this google chrome extension instead "Audio pick"
https://chrome.google.com/webstore/detail/audiopick/gfhcppdamigjkficnjnhmnljljhagaha/related