如何以编程方式更改电子内部 Angular 中的音频输出设备？

【问题标题】：How to programmatically change the audio output device in Angular inside Electron?如何以编程方式更改电子内部 Angular 中的音频输出设备？
【发布时间】：2021-07-23 20:42:13
【问题描述】：

我正在使用 Angular 11 和 Electron 12 开发桌面应用程序。该应用程序必须能够发出声音，并且用户必须能够更改应用程序使用的音频输出设备。

所以，我尝试使用setSinkId WebRTC 实验功能。 Electron 使用支持此功能的 Chromium。因此，在 Electron webPreferences 中，我启用了 experimentalFeatures。

现在，问题在于 Typescript (v4.2.3) 无法识别 setSinkId 功能。

我尝试在 Angular 组件中执行此操作：

但如您所见，我收到以下错误消息：

我知道，可能 Typescript 还不支持这个功能。但是，如何在 Electron 中更改 Angular 中的音频输出设备？

【问题讨论】：

标签： angular typescript electron webrtc

【解决方案1】：

特别是在为 Electron TypeScript 的默认类型开发应用程序时，这里并不是很有帮助。 setSinkId() 在 Chromium 中受支持，因此在 Electron 中也可用。

您可以通过显式添加 setSinkId() 的类型定义来帮助 TypeScript。

const audio = <HTMLAudioElement & { setSinkId (deviceId: string): void }> new Audio();

audio.setSinkId('the-id-of-the-device');

【讨论】：

顺便说一句，ESLint 告诉我使用as 而不是这个：const audio = new Audio() as HTMLAudioElement & { setSinkId (deviceId: string): void };
我很高兴听到这个消息。 as 在技术上与 <> 语法相同。但它不能与 JSX 一起使用。只要你不使用 JSX，它只是一种风格选择。你甚至可以配置 eslint 来强制执行 <> 而不是 as。 github.com/typescript-eslint/typescript-eslint/blob/master/…