无法将WebRTC音频轨道加载到HTML audio元素播放，src未更新求助

核心问题总结 #

你遇到的问题主要是媒体源设置时机与播放触发时机不匹配，加上部分API使用不当，导致音频无法正常加载播放。

具体问题点 #

1. 提前触发播放：在incoming会话逻辑中，你在ontrack事件触发前就调用了remoteAudio.play()，此时srcObject还未绑定有效媒体流，音频元素没有可播放的内容，播放操作直接失败。
2. 冗余的load()调用：设置srcObject后无需调用load()，该方法仅适用于传统URL绑定的场景，反而可能干扰WebRTC媒体流的自动加载流程。
3. 废弃API的使用：window.URL.createObjectURL已被标记为废弃，WebRTC场景下应统一使用srcObject直接绑定MediaStream，避免兼容性问题。
4. 缺乏错误捕获：浏览器的自动播放策略会阻止无用户交互的自动播放，未捕获play()的Promise异常会导致问题无法排查。

修复后的代码示例 #

1. 统一音频流绑定与播放逻辑

function attachRemoteStream(session) {
  session.connection.ontrack = (event) => {
    if (event.track.kind === 'audio') {
      const stream = event.streams.length > 0 
        ? event.streams[0] 
        : new MediaStream([event.track]);
      
      remoteAudio.srcObject = stream;
      // 监听媒体就绪事件后再触发播放，确保流已加载完成
      remoteAudio.addEventListener('canplay', () => {
        remoteAudio.play().catch(err => {
          console.error('音频播放失败:', err);
          // 可提示用户手动点击播放按钮，适配浏览器自动播放限制
        });
      }, { once: true });
    }
  };
}

2. 调整会话监听逻辑

phone.on('newRTCSession', function(ev) {
  var newSession = ev.session;
  // ... 保留其他业务逻辑
  session.on('peerconnection', (e) => {
    if (session.direction === 'incoming') {
      attachRemoteStream(session);
      // 移除提前的play()和load()调用，交由ontrack内的就绪事件处理
    } else {
      session.connection.addEventListener('track', function(e) {
        if (e.track.kind === 'audio') {
          const stream = e.streams.length > 0 
            ? e.streams[0] 
            : new MediaStream([e.track]);
          
          remoteAudio.srcObject = stream;
          remoteAudio.addEventListener('canplay', () => {
            remoteAudio.play().catch(err => {
              console.error('音频播放失败:', err);
            });
          }, { once: true });
        }
      });
    }
  });
});

额外注意事项 #

• 浏览器自动播放限制：现代浏览器要求媒体播放必须由用户交互（如点击、触摸事件）触发，若你的场景无法满足，可主动提示用户手动点击音频元素的播放按钮。
• 轨道状态监听：可添加event.track.onended事件监听，处理音频轨道结束后的清理逻辑。
• 调试建议：在ontrack事件内打印stream.active和event.track.readyState，确认媒体轨道是否处于正常的live状态。

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