Add support for audio output selection

src/components/audiooutputtest/AudioOutputTest.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@mui/material';
+import {
+	useAppDispatch,
+	useAppSelector,
+	useDeviceSelector
+} from '../../store/hooks';
+import { notificationsActions } from '../../store/slices/notificationsSlice';
+import { ChooserDiv } from '../devicechooser/DeviceChooser';
+import { testAudioOutputLabel } from '../translated/translatedComponents';
+
+const TestAudioOutputButton = (): JSX.Element => {
+	const audioDevices = useDeviceSelector('audiooutput');
+	const audioInProgress = useAppSelector((state) => state.me.audioInProgress);
+	const dispatch = useAppDispatch();
+
+	const triggerTestSound = (): void => {
+		dispatch(notificationsActions.playTestSound());
+	};
+
+	return (
+		<>
+			{ audioDevices.length > 1 &&
+			<ChooserDiv>
+				<Button
+					variant='contained'
+					onClick={triggerTestSound}
+					disabled={audioInProgress}
+				>
+					{ testAudioOutputLabel() }
+				</Button></ChooserDiv>
+			}
+		</>
+	);
+};
+
+export default TestAudioOutputButton;

src/components/audiopeers/AudioPeers.tsx

@@ -4,13 +4,15 @@ import AudioView from '../audioview/AudioView';
 
 const AudioPeers = (): JSX.Element => {
 	const micConsumers = useAppSelector(audioConsumerSelector);
+	const deviceId = useAppSelector((state) => state.settings.selectedAudioOutputDevice);
 
 	return (
 		<div>
 			{ micConsumers.map((consumer) => (
 				!consumer.localPaused && !consumer.remotePaused && <AudioView
 					key={consumer.id}
 					consumer={consumer}
+					deviceId={deviceId}
 				/>
 			)) }
 		</div>

src/components/audioview/AudioView.tsx

@@ -1,16 +1,19 @@
 import { useContext, useEffect, useRef } from 'react';
 import { StateConsumer } from '../../store/slices/consumersSlice';
 import { ServiceContext } from '../../store/store';
+import { HTMLMediaElementWithSink } from '../../utils/types';
 
 interface AudioViewProps {
 	consumer: StateConsumer;
+	deviceId?: string;
 }
 
 const AudioView = ({
-	consumer
+	consumer,
+	deviceId
 }: AudioViewProps): JSX.Element => {
 	const { mediaService } = useContext(ServiceContext);
-	const audioElement = useRef<HTMLAudioElement>(null);
+	const audioElement = useRef<HTMLMediaElementWithSink>(null);
 
 	useEffect(() => {
 		const { track } = mediaService.getConsumer(consumer.id) ?? {};
@@ -27,14 +30,18 @@ const AudioView = ({
 		stream.addTrack(track);
 		audioElement.current.srcObject = stream;
 
+		if (deviceId) {
+			audioElement.current.setSinkId(deviceId);
+		}
+
 		return () => {
 			if (audioElement.current) {
 				audioElement.current.srcObject = null;
 				audioElement.current.onplay = null;
 				audioElement.current.onpause = null;
 			}
 		};
-	}, []);
+	}, [ deviceId ]);
 
 	useEffect(() => {
 		const { audioGain } = consumer;

src/components/devicechooser/AudioInputChooser.tsx

@@ -9,7 +9,7 @@ import {
 import { meProducersSelector } from '../../store/selectors';
 import {
 	applyLabel,
-	audioDeviceLabel,
+	audioInputDeviceLabel,
 	noAudioInputDevicesLabel,
 	selectAudioInputDeviceLabel
 } from '../translated/translatedComponents';
@@ -54,7 +54,7 @@ const AudioInputChooser = ({
 					<DeviceChooser
 						value={selectedAudioDevice ?? ''}
 						setValue={handleDeviceChange}
-						name={audioDeviceLabel()}
+						name={audioInputDeviceLabel()}
 						devicesLabel={selectAudioInputDeviceLabel()}
 						noDevicesLabel={noAudioInputDevicesLabel()}
 						disabled={audioDevices.length < 2 || audioInProgress}

src/components/devicechooser/AudioOutputChooser.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import {
+	useAppDispatch,
+	useAppSelector,
+	useDeviceSelector,
+} from '../../store/hooks';
+import DeviceChooser, { ChooserDiv } from './DeviceChooser';
+import { settingsActions } from '../../store/slices/settingsSlice';
+import { audioOutputDeviceLabel, noAudioOutputDevicesLabel, selectAudioOutputDeviceLabel } from '../translated/translatedComponents';
+
+const AudioOutputChooser = (): JSX.Element => {
+	const dispatch = useAppDispatch();
+	const audioDevices = useDeviceSelector('audiooutput');
+	const audioInProgress = useAppSelector((state) => state.me.audioInProgress);
+	const audioOutputDevice = useAppSelector(
+		(state) => state.settings.selectedAudioOutputDevice
+	);
+	const [ selectedDevice, setSelectedDevice ] =
+    useState(audioOutputDevice);
+
+	const handleDeviceChange = (deviceId: string): void => {
+		if (deviceId) {
+			setSelectedDevice(deviceId);
+			dispatch(settingsActions.setSelectedAudioOutputDevice(deviceId));
+		}
+	};
+
+	return (
+		<>
+			{audioDevices.length > 1 && (
+				<ChooserDiv>
+					<DeviceChooser
+						value={selectedDevice ?? ''}
+						setValue={handleDeviceChange}
+						name={audioOutputDeviceLabel()}
+						devicesLabel={selectAudioOutputDeviceLabel()}
+						noDevicesLabel={noAudioOutputDevicesLabel()}
+						disabled={audioDevices.length < 2 || audioInProgress}
+						devices={audioDevices}
+					/>
+				</ChooserDiv>
+			)}
+		</>
+	);
+};
+
+export default AudioOutputChooser;

src/components/settingsdialog/MediaSettings.tsx

@@ -3,17 +3,23 @@ import AudioInputChooser from '../devicechooser/AudioInputChooser';
 import VideoInputChooser from '../devicechooser/VideoInputChooser';
 import MediaPreview from '../mediapreview/MediaPreview';
 import { BlurSwitch } from './SettingsSwitches';
+import { useAppSelector } from '../../store/hooks';
+import { canSelectAudioOutput } from '../../store/selectors';
+import AudioOutputChooser from '../devicechooser/AudioOutputChooser';
 
 const NestedList = styled(List)(({ theme }) => ({
 	padding: theme.spacing(0, 1.5)
 }));
 
 const MediaSettings = (): JSX.Element => {
+	const showAudioOutputChooser = useAppSelector(canSelectAudioOutput);
+
 	return (
 		<List>
 			<MediaPreview withControls={false} />
 			<NestedList>
 				<AudioInputChooser withConfirm />
+				{showAudioOutputChooser && <AudioOutputChooser /> }
 			</NestedList>
 			<NestedList>
 				<VideoInputChooser withConfirm />

src/components/translated/translatedComponents.tsx

@@ -513,15 +513,20 @@ export const advancedSettingsLabel = (): string => intl.formatMessage({
 	defaultMessage: 'Advanced'
 });
 
-// export const audioInputDeviceLabel = (): string => intl.formatMessage({
-// 	id: 'settings.audioInput',
-// 	defaultMessage: 'Audio input device'
-// });
+export const audioInputDeviceLabel = (): string => intl.formatMessage({
+	id: 'settings.audioInput',
+	defaultMessage: 'Audio input device'
+});
+
+export const audioOutputDeviceLabel = (): string => intl.formatMessage({
+	id: 'settings.audioOutput',
+	defaultMessage: 'Audio output device'
+});
 
-// export const audioOutputDeviceLabel = (): string => intl.formatMessage({
-// 	id: 'settings.audioOutput',
-// 	defaultMessage: 'Audio output device'
-// });
+export const testAudioOutputLabel = (): string => intl.formatMessage({
+	id: 'settings.testAudioOutput',
+	defaultMessage: 'Test Audio output'
+});
 
 export const tryToLoadAudioDevices = (): string => intl.formatMessage({
 	id: 'settings.tryToLoadAudioDevices',
@@ -538,11 +543,6 @@ export const selectAudioOutputDeviceLabel = (): string => intl.formatMessage({
 	defaultMessage: 'Select audio output device'
 });
 
-export const audioDeviceLabel = (): string => intl.formatMessage({
-	id: 'settings.audio',
-	defaultMessage: 'Audio input device'
-});
-
 export const noAudioInputDevicesLabel = (): string => intl.formatMessage({
 	id: 'settings.cantSelectAudioInput',
 	defaultMessage: 'Unable to select audio input device'

src/store/middlewares/notificationMiddleware.tsx

@@ -4,13 +4,16 @@ import { lobbyPeersActions } from '../slices/lobbyPeersSlice';
 import { peersActions } from '../slices/peersSlice';
 import { MiddlewareOptions, RootState } from '../store';
 import { roomSessionsActions } from '../slices/roomSessionsSlice';
+import { notificationsActions } from '../slices/notificationsSlice';
+import { HTMLMediaElementWithSink } from '../../utils/types';
+import { settingsActions } from '../slices/settingsSlice';
 
 interface SoundAlert {
-	[type: string]: {
-		audio: HTMLAudioElement;
-		debounce: number;
-		last?: number;
-	};
+  [type: string]: {
+    audio: HTMLMediaElementWithSink;
+    debounce: number;
+    last?: number;
+  };
 }
 
 const logger = new Logger('NotificationMiddleware');
@@ -21,18 +24,18 @@ const createNotificationMiddleware = ({
 	logger.debug('createNotificationMiddleware()');
 
 	const soundAlerts: SoundAlert = {
-		'default': {
-			audio: new Audio('/sounds/notify.mp3'),
-			debounce: 0
-		}
+		default: {
+			audio: new Audio('/sounds/notify.mp3') as HTMLMediaElementWithSink,
+			debounce: 0,
+		},
 	};
 
-	const playNotificationSounds = async (type: string) => {
+	const playNotificationSounds = async (type: string, ignoreDebounce = false) => {
 		const soundAlert = soundAlerts[type] ?? soundAlerts['default'];
 
 		const now = Date.now();
 
-		if (soundAlert?.last && (now - soundAlert.last) < soundAlert.debounce)
+		if (!ignoreDebounce && soundAlert?.last && (now - soundAlert.last) < soundAlert.debounce)
 			return;
 
 		soundAlert.last = now;
@@ -46,12 +49,18 @@ const createNotificationMiddleware = ({
 	for (const [ k, v ] of Object.entries(config.notificationSounds)) {
 		if (v?.play) {
 			soundAlerts[k] = {
-				audio: new Audio(v.play),
-				debounce: v.debounce ?? 0
+				audio: new Audio(v.play) as HTMLMediaElementWithSink,
+				debounce: v.debounce ?? 0,
 			};
 		}
 	}
 
+	const attachAudioOutput = (deviceId: string) => {
+		Object.values(soundAlerts).forEach((alert) => {
+			alert.audio.setSinkId(deviceId).catch((e) => logger.error(e));
+		});
+	};
+
 	const middleware: Middleware = ({
 		getState
 	}: {
@@ -89,6 +98,17 @@ const createNotificationMiddleware = ({
 				if (peersActions.addPeer.match(action)) {
 					await playNotificationSounds('newPeer');
 				}
+
+				if (
+					settingsActions.setSelectedAudioOutputDevice.match(action) &&
+          action.payload
+				) {
+					attachAudioOutput(action.payload);
+				}
+
+				if (notificationsActions.playTestSound.match(action)) {
+					await playNotificationSounds('default', true);
+				}
 			}
 
 			return next(action);

src/store/selectors.tsx

@@ -27,6 +27,12 @@ const headlessSelector: Selector<boolean | undefined> = (state) => state.room.he
 
 export const isMobileSelector: Selector<boolean> = (state) => state.me.browser.platform === 'mobile';
 
+export const canSelectAudioOutput: Selector<boolean> = (state) => {
+	const { name, version } = state.me.browser;
+
+	return name === 'chrome' && Number.parseInt(version) >= 110 && 'setSinkId' in HTMLAudioElement.prototype;
+};
+
 /**
  * Returns the peers as an array.
  * 

src/store/slices/notificationsSlice.tsx

@@ -28,7 +28,8 @@ const notificationsSlice = createSlice({
 		}),
 		removeNotification: ((state, action: PayloadAction<SnackbarKey>) => {
 			return state.filter((notification) => notification.key !== action.payload);
-		})
+		}),
+		playTestSound: () => {}
 	},
 	extraReducers: (builder) => {
 		builder

src/store/slices/settingsSlice.tsx

@@ -13,6 +13,7 @@ export interface SettingsState {
 	dynamicWidth: boolean;
 	aspectRatio: number;
 	selectedAudioDevice?: string;
+	selectedAudioOutputDevice?: string;
 	selectedVideoDevice?: string;
 	resolution: Resolution;
 	frameRate: number;
@@ -107,6 +108,9 @@ const settingsSlice = createSlice({
 		setSelectedAudioDevice: ((state, action: PayloadAction<string | undefined>) => {
 			state.selectedAudioDevice = action.payload;
 		}),
+		setSelectedAudioOutputDevice: ((state, action: PayloadAction<string | undefined>) => {
+			state.selectedAudioOutputDevice = action.payload;
+		}),
 		setSelectedVideoDevice: ((state, action: PayloadAction<string | undefined>) => {
 			state.selectedVideoDevice = action.payload;
 		}),

src/utils/types.tsx

@@ -209,4 +209,9 @@ export interface RTCStatsMetaData {
 export interface Dimensions {
 	width: number,
 	height: number
-}
+}
+
+export interface HTMLMediaElementWithSink extends HTMLMediaElement {
+	// eslint-disable-next-line no-unused-vars
+	setSinkId(deviceId: string): Promise<void>
+}

src/views/join/Join.tsx

@@ -15,6 +15,9 @@ import PrecallTitle from '../../components/precalltitle/PrecallTitle';
 import { ChooserDiv } from '../../components/devicechooser/DeviceChooser';
 import { BlurSwitch } from '../../components/settingsdialog/SettingsSwitches';
 import { meActions } from '../../store/slices/meSlice';
+import AudioOutputChooser from '../../components/devicechooser/AudioOutputChooser';
+import { canSelectAudioOutput } from '../../store/selectors';
+import TestAudioOutputButton from '../../components/audiooutputtest/AudioOutputTest';
 
 interface JoinProps {
 	roomId: string;
@@ -29,6 +32,7 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 	const mediaLoading = useAppSelector((state) => state.me.videoInProgress || state.me.audioInProgress);
 	const audioMuted = useAppSelector((state) => state.me.audioMuted);
 	const videoMuted = useAppSelector((state) => state.me.videoMuted);
+	const showAudioOutputChooser = useAppSelector(canSelectAudioOutput);
 
 	const url = new URL(window.location.href);
 	const headless = Boolean(url.searchParams.get('headless'));
@@ -63,7 +67,9 @@ const Join = ({ roomId }: JoinProps): React.JSX.Element => {
 				<>
 					<MediaPreview startAudio={!audioMuted} startVideo={!videoMuted} stopAudio={false} stopVideo={false} />
 					<AudioInputChooser />
+					{showAudioOutputChooser && <AudioOutputChooser /> }
 					<VideoInputChooser />
+					<TestAudioOutputButton />
 					<BlurSwitch />
 					<ChooserDiv>
 						<TextInputField