JS切换扬声器设备

最近有做到检测音视频的功能，记录一下，在网上也没有找到合适的文章讲解如何切换。

获取扬声器设备也是使用的  navigator.mediaDevices.enumerateDevices() 方法

1.获取到扬声器设备列表，代码如下 其中 audiooutput 就是代表的扬声器设备。

  const [audioList, setAudioList] = useState([]);
   //获取音频列表
  const getSpeakerList = () => {
    navigator.mediaDevices
      .enumerateDevices()
      .then(function (devices) {
        let list = [];
        devices.forEach(function (device) {
          if (device.kind === 'audiooutput') {
            device.value=device.deviceId
            list.push(device);
          }
        });
        setAudioList(list);
      })
      .catch(function (err) {
        console.log(err.name + ': ' + err.message);
      });
  };  

2.进行切换，主要是使用到了一个新的方法API   setSinkId    

附上方法地址：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId

具体实现如下

1. 先创建一个audio 音频标签 播放内置的音乐

2.   <audio src={'你的音乐源'} autoPlay="autoplay" loop="loop" ref={speakerAudio}  >
             您的浏览器暂不支持音频播放
           </audio>

     使用 useRef 获取到DOM 

 const speakerAudio=useRef()

 接下来使用 将拿到的设备列表进行循环输出，并添加改变事件，拿到当前选中项，进行设置即可切换扬声器设备了

              <p>请选择扬声器:</p>
              {audioList.length > 0 && audioList[0].deviceId !== '' ? (
                <Radio.Group onChange={audioRadioChange} options={audioList} defaultValue=    
                  {speakerDeviceId} size="small" />
              ) : (
                <Radio defaultChecked disabled={true}>
                  未检测到设备
                </Radio>
              )}

        

 //切换扬声器设备
  const audioRadioChange = (e) => {
    speakerAudio.current.setSinkId(item[0].deviceId) //设置扬声器
  };

附:若使用了 localStorage 缓存了当前选中的扬声器设备，需要加载的时候立即设置一下，否则会读取到其他扬声器设备

  useEffect(() => {
    if(speakerAudio){
      speakerAudio.current.setSinkId(speakerDeviceId) //初始化设置扬声器
    }
  }, [speakerDeviceId]);