Question

我在HTML中创建了一个简单的音板，其中包含这样的简单线条：

<body>
    <audio id="sound1" src="mysound.wav"></audio>
    <button class="button" onclick="document.getElementById('sound1').play()">My sound</button>
</body>

用户是否可以通过下拉菜单或类似方式选择播放声音的音频输出设备？

Answer 1

以下是如何通过audio.src更改select的示例：

function play() {
  document.getElementById('sound1').play()
  console.log(document.getElementById('sound1').getAttribute('src') + " starts playing")
}

function changeSound() {
  document.getElementById('sound1').src = document.getElementById('select').value
  console.log("selected sound: " + document.getElementById('sound1').src)
}

<audio id="sound1" src="mysound1.wav"></audio>
<select id="select" onchange="changeSound()">
  <option value="mysound1.wav">mysound1.wav</option>
  <option value="mysound2.wav">mysound2.wav</option>
  <option value="mysound3.wav">mysound3.wav</option>
</select>
<button class="button" onclick="play()">My sound</button>

Answer 2

现在可以了。

首先，您可以通过运行 navigator.mediaDevices.enumerateDevices() 并按等于 'audiooutput' 的属性 'kind' 过滤找到的设备来收集可能的音频输出设备。

那么你应该使用 DOM 的音频/视频元素的 setSinkId() 方法。看起来您必须为 HTML 页面上的每个视频/音频元素运行 setSingId(someSelectedDeviceId)

这是一个相当新的功能，Safari 仍然不支持。但是 Chrome 和部分 FireFox 已经有了这种支持 https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

HTML / js在浏览器中选择音频输出设备

2 个答案: