JS切换扬声器设备

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

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

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

  const [audioList, setAudioList] = useState([]);
   //获取音频列表
  const getSpeakerList = () => {
    
      .enumerateDevices()
      .then(function (devices) {
        let list = [];
        (function (device) {
          if ( === 'audiooutput') {
            =
            (device);
          }
        });
        setAudioList(list);
      })
      .catch(function (err) {
        ( + ': ' + );
      });
  };

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

附上方法地址：/en-US/docs/Web/API/HTMLMediaElement/setSinkId

具体实现如下

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

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

使用 useRef 获取到DOM

 const speakerAudio=useRef()

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

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

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

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

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

秒客网

JS切换扬声器设备

相关文章