WebRTC音频流接入HTML5 audio后控件禁用，如何调节音量？

问题根源 #

你当前的核心问题是错误地将WebRTC媒体流绑定到了<source>元素。<source>标签仅用于指定静态媒体文件（如MP3、OGG）的源，而实时的WebRTC MediaStream需要直接绑定到<audio>元素本身的srcObject属性，这样浏览器才能正确识别流并启用音量控制等原生控件。

修正基础代码 #

调整HTML结构 #

无需单独给<source>设置ID，直接操作<audio>元素即可：

<audio id="audio-player" controls></audio>

修正JS绑定逻辑 #

把媒体流直接赋值给<audio>元素的srcObject：

pc = new RTCPeerConnection(config);

pc.addEventListener('track', function (evt) {
    if (evt.track.kind === 'video') {
        document.getElementById('video').srcObject = evt.streams[0];
    } else {
        // 直接操作audio元素，而非内部的source标签
        document.getElementById('audio-player').srcObject = evt.streams[0];
    }
});

完成以上修改后，原生音量控件会自动启用，volume属性调节也会正常生效。

两种音量调节方案 #

1. 直接使用audio元素的volume属性 #

修正绑定后，可直接通过volume属性控制音量（取值范围0-1，0为静音，1为最大音量）：

const audioPlayer = document.getElementById('audio-player');
// 设置音量为50%
audioPlayer.volume = 0.5;

2. 使用Web Audio API实现精细控制 #

如果需要动态渐变、多轨混合等复杂音频处理，可借助Web Audio API的GainNode实现：

// 需在用户交互（如点击按钮）后初始化AudioContext，避免浏览器自动播放限制
const audioContext = new AudioContext();
const audioPlayer = document.getElementById('audio-player');

// 将audio元素连接到AudioContext
const source = audioContext.createMediaElementSource(audioPlayer);
// 创建音量控制节点
const gainNode = audioContext.createGain();

// 连接节点链路：source -> gainNode -> 系统输出
source.connect(gainNode);
gainNode.connect(audioContext.destination);

// 设置初始音量为30%
gainNode.gain.value = 0.3;

// 示例：2秒内将音量从当前值平滑升至最大
gainNode.gain.linearRampToValueAtTime(1, audioContext.currentTime + 2);

内容的提问来源于stack exchange，提问作者SagiZiv