如何用React/JavaScript设置Safari音量为0%及控制Daily.co参会者音量？

不需要额外引入第三方类库，Daily.co官方提供的@daily-co/daily-js SDK已经内置了完整的音频控制能力，下面分场景给出实现方案：

本地参会者静音（控制自己的音量） #

通过callObject的setLocalAudio方法可以直接切换本地音频的开启/关闭，设置为false即为静音：

• callObject.setLocalAudio(false)：静音自己
• callObject.setLocalAudio(true)：恢复音频

远端参会者静音（将他人音量设为0） #

有两种实现方式，按需选择：

1. 停止接收远端音频流（彻底静音）：使用setRemoteAudio方法，传入远端参会者的sessionId和false，直接停止接收该用户的音频流
2. 保留音频流但设置音量为0：获取到远端音频元素后，直接修改其volume属性为0

React组件完整代码示例 #

import { useEffect, useRef, useState } from 'react';
import DailyIframe from '@daily-co/daily-js';

const VideoCall = () => {
  const callObjectRef = useRef(null);
  const [remoteParticipants, setRemoteParticipants] = useState([]);

  // 初始化通话实例
  useEffect(() => {
    const callObject = DailyIframe.createCallObject();
    callObjectRef.current = callObject;

    // 监听远端参会者加入
    callObject.on('participant-joined', (event) => {
      const isLocal = event.participant.session_id === callObject.participantId();
      if (!isLocal) {
        setRemoteParticipants(prev => [...prev, event.participant]);
      }
    });

    // 监听远端参会者离开
    callObject.on('participant-left', (event) => {
      setRemoteParticipants(prev => 
        prev.filter(p => p.session_id !== event.participant.session_id)
      );
    });

    // 组件卸载时清理通话实例
    return () => callObject.destroy();
  }, []);

  // 加入Daily房间
  const joinRoom = async () => {
    try {
      await callObjectRef.current.join({ url: '你的Daily房间URL' });
    } catch (err) {
      console.error('加入房间失败:', err);
    }
  };

  // 切换本地静音状态
  const toggleLocalMute = () => {
    const currentState = callObjectRef.current.localAudio();
    callObjectRef.current.setLocalAudio(!currentState);
  };

  // 静音指定远端用户（停止音频流）
  const muteRemote = (sessionId) => {
    callObjectRef.current.setRemoteAudio(sessionId, false);
  };

  // 恢复远端用户音频
  const unmuteRemote = (sessionId) => {
    callObjectRef.current.setRemoteAudio(sessionId, true);
  };

  // 仅设置远端音量为0（保留音频流）
  const setRemoteVolumeToZero = (sessionId) => {
    const audioEl = document.getElementById(`remote-audio-${sessionId}`);
    if (audioEl) audioEl.volume = 0;
  };

  return (
    <div className="video-call-container">
      <button onClick={joinRoom}>加入通话</button>
      <button onClick={toggleLocalMute}>
        {callObjectRef.current?.localAudio() ? '静音自己' : '取消静音'}
      </button>

      <h3>远端参会者列表</h3>
      {remoteParticipants.map(participant => (
        <div key={participant.session_id} className="participant-card">
          <p>{participant.user_name || '匿名参会者'}</p>
          <button onClick={() => muteRemote(participant.session_id)}>静音（停止流）</button>
          <button onClick={() => unmuteRemote(participant.session_id)}>恢复音频</button>
          <button onClick={() => setRemoteVolumeToZero(participant.session_id)}>仅设音量为0</button>
          {/* 渲染远端音频元素 */}
          <audio
            id={`remote-audio-${participant.session_id}`}
            autoPlay
            muted={false}
            srcObject={participant.tracks.audio?.persistentTrack}
          />
        </div>
      ))}
    </div>
  );
};

export default VideoCall;

注意事项 #

• 先安装依赖：npm install @daily-co/daily-js
• 控制远端静音需要当前用户拥有房间的操作权限（比如主持人角色），需要在Daily后台配置房间权限
• 两种远端静音方式的区别：停止音频流会减少带宽占用，仅设音量为0则可以在需要时快速恢复音量

内容的提问来源于stack exchange，提问作者M.N Malik