在 webrtc 期间播放声音/从其他音频元素获取播放设备答案

【问题标题】：Play sound during webrtc / get playback device from other audio element在 webrtc 期间播放声音/从其他音频元素获取播放设备
【发布时间】：2021-12-05 03:57:02
【问题描述】：

我想弄清楚如何在 webrtc 通话期间在 LOCAL 耳机上播放声音。

这应该很简单：

function playsound() {
new Audio(
    "data:audio/wav;base64,UklGRnIGAABXQVZFZm10IBIAAAAHAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAEAGAABkYXRhQAYAAP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////W0k4U9s8Sbymo7D/PlNbLhwbKLCaryMZHziclq8yIDzBvDgwvpuZvB4ZJ7STncEcGi+8ods+SayuPBwdOJ6UpTgWITqcl7owJVPTRSEnyZmYuB4ZKLyTnL4eGzi+sDw8wZ6kPBodMp6UpDwWITqhnM04OLrBMBsizZiYsiAYKM2UnckhIEXT/yk2spmePBkcLqGUpT4XIDqqqU0+26m6Khkg55iYsiEXJ+eWnucoK+fnMB8urpaeSRgbLaWUpj4YIT60wTZFsJ6wKBggW5iYsCQXKFubplMwTbjnJxsrq5Wd/xkbLamUpkUdKVPJPipJpZipKBggTZiXrycXKf+itElFuKnbIRoqrJSd0xobLqyVqkUlOtP/KSJFn5amKhcgPpmWryoYK/+vWzj/pp/THhoosJSdzRobLrKatEUw07xFHx08npWmLhcgOpuXsi0dNufNLy7TnZrBHRoluJSdyRsaL7yi2z5Nrq48HBw4npWlMhYgOJ2YvDAnU9NFIifJmZm6HhgnvpScyR0bNsGyPDzJn6U6Gh0yn5SlOhcgOKKdzTg4vMkwHCLJmJi0HxgnzZWdzSEhRc3/KjaymZ48Gh0voZSlPBcgPKqpTT7bqborGiHbmJiwIRco25ae5ykt59syIC+slp5JGRwupJSlRRkiRbLBOEmwnrApGSBbmJivJBco/5umWzJNuOcoGyurlZ1bGRsuqJSmRR0pU8k8KkmlmKooGCBNmJevJxcpW6O4RUW6quchGimulJ3bGhstrJWqPiQ621spIkWflqgqFyA+mZewKRgr/69bOP+mn9MeGiiwlJ3NGhsuspq0RTDTvEUfHT6elaUuFyA8m5eyLR02580vLs2dmsEdGie0lJzJHBswuqLTRU2srjwcHTielKUyFiA6nZi6MCdT00UiJ8mZmboeGSe+lJ3JHRs2wbI8PMGfpToaHTKflKU4FiA4op7TODi8yTAcIsmYmLQfGCfNlZ3NISFFzf8qNrKZnjwaHS+hlKU8FyA8qqlNPtOpuisaIduYmLAhFyjblp7nKS3n2zIgL6yWnkkZHC6kk56rLyUgHyMnMDpb27y6srSyuLq+ydPn/1NNSUlJSUlJSU1NU1NbW1v////////n5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+f//////////////////////////////////////1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW////////////////////////////////////////////////////////+fn5+fn//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8=")
  .play();
  }
  
async function startaudio() {
await navigator.mediaDevices.getUserMedia({audio:true});
}

First <button onclick='startaudio()'>start audio</button><br/>
Then <button onclick='playsound()'>play sound</button><br/>
PS. Demo doesn't work in code snippets due to security not allowed to get microphone

但是，似乎在 webrtc 通话期间，这是在耳机以外的其他音频设备上播放的。

如何强制它使用与正在进行的 webrtc 设备使用相同的音频设备？

编辑：据我所知，问题根本与 webrtc 无关，而是navigator.mediaDevices.getUserMedia 用于在麦克风激活时切换到另一个音频设备的耳机。

额外问题：为什么除非您点击按钮，否则这种非常短的声音通常不会播放？

【问题讨论】：

你用的是什么浏览器？我无法在 macOS 上的任何浏览器中重现：jsfiddle.net/g8f3dwzn 对于它的价值，您可以尝试检查
@Kaiido 你的 jsfiddle 实际上并没有获得打开麦克风的权限（getUserMedia），所以它播放得很好，因为它击中了主扬声器。
什么？您必须在出现提示时授予它对麦克风的访问权限。这样做你会发现它工作正常。
@Kaiido jsfiddle 和代码 sn-p 用于运行代码的 Iframe 甚至不允许询问至少在 Firefox 和 chrome 中的麦克风使用情况。但我确实找到了解决方案。
确实如此，您需要从我提供的 URL 中运行小提琴，而不是从裸露的 https://jsfiddle/

标签： javascript webrtc html5-audio web-audio-api

【解决方案1】：

我想通了...我从这个来源得到了线索：https://www.html5rocks.com/en/tutorials/webaudio/intro/

let dtmfSound = null;
let audioCtx = new(window.AudioContext || window.webkitAudioContext)();

function playsound() {
  const sampleSource = audioCtx.createBufferSource();
  sampleSource.buffer = dtmfSound;
  sampleSource.connect(audioCtx.destination);
  sampleSource.start(0);
}

async function startaudio() {
  await navigator.mediaDevices.getUserMedia({
    audio: true
  });
}

async function Init() {
  let dtmfdata = await fetch("data:audio/wav;base64,UklGRnIGAABXQVZFZm10IBIAAAAHAAEAQB8AAEAfAAABAAgAAABmYWN0BAAAAEAGAABkYXRhQAYAAP//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////W0k4U9s8Sbymo7D/PlNbLhwbKLCaryMZHziclq8yIDzBvDgwvpuZvB4ZJ7STncEcGi+8ods+SayuPBwdOJ6UpTgWITqcl7owJVPTRSEnyZmYuB4ZKLyTnL4eGzi+sDw8wZ6kPBodMp6UpDwWITqhnM04OLrBMBsizZiYsiAYKM2UnckhIEXT/yk2spmePBkcLqGUpT4XIDqqqU0+26m6Khkg55iYsiEXJ+eWnucoK+fnMB8urpaeSRgbLaWUpj4YIT60wTZFsJ6wKBggW5iYsCQXKFubplMwTbjnJxsrq5Wd/xkbLamUpkUdKVPJPipJpZipKBggTZiXrycXKf+itElFuKnbIRoqrJSd0xobLqyVqkUlOtP/KSJFn5amKhcgPpmWryoYK/+vWzj/pp/THhoosJSdzRobLrKatEUw07xFHx08npWmLhcgOpuXsi0dNufNLy7TnZrBHRoluJSdyRsaL7yi2z5Nrq48HBw4npWlMhYgOJ2YvDAnU9NFIifJmZm6HhgnvpScyR0bNsGyPDzJn6U6Gh0yn5SlOhcgOKKdzTg4vMkwHCLJmJi0HxgnzZWdzSEhRc3/KjaymZ48Gh0voZSlPBcgPKqpTT7bqborGiHbmJiwIRco25ae5ykt59syIC+slp5JGRwupJSlRRkiRbLBOEmwnrApGSBbmJivJBco/5umWzJNuOcoGyurlZ1bGRsuqJSmRR0pU8k8KkmlmKooGCBNmJevJxcpW6O4RUW6quchGimulJ3bGhstrJWqPiQ621spIkWflqgqFyA+mZewKRgr/69bOP+mn9MeGiiwlJ3NGhsuspq0RTDTvEUfHT6elaUuFyA8m5eyLR02580vLs2dmsEdGie0lJzJHBswuqLTRU2srjwcHTielKUyFiA6nZi6MCdT00UiJ8mZmboeGSe+lJ3JHRs2wbI8PMGfpToaHTKflKU4FiA4op7TODi8yTAcIsmYmLQfGCfNlZ3NISFFzf8qNrKZnjwaHS+hlKU8FyA8qqlNPtOpuisaIduYmLAhFyjblp7nKS3n2zIgL6yWnkkZHC6kk56rLyUgHyMnMDpb27y6srSyuLq+ydPn/1NNSUlJSUlJSU1NU1NbW1v////////n5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+fn5+f//////////////////////////////////////1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW1tbW////////////////////////////////////////////////////////+fn5+fn//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8=");
  dtmfSound = await audioCtx.decodeAudioData(await dtmfdata.arrayBuffer());
}

Init();

First <button onclick='startaudio()'>start audio</button><br/>
Then <button onclick='playsound()'>play sound</button><br/>
PS. Demo doesn't work in code snippets due to security not allowed to get microphone

【讨论】：