如何用JavaScript在Twilio客户端实现活跃通话时长显示？

嘿，很高兴你的Twilio语音应用已经能正常运行通话功能了！要给接通后的通话加上实时时长显示，咱们可以结合Twilio Device的事件监听和前端计时逻辑来搞定，步骤很清晰，我给你详细拆解：

1. 准备基础跟踪变量 #

首先定义几个变量来管理通话状态、开始时间和计时定时器，建议放在模块作用域里避免全局污染：

let activeCall = null; // 存储当前活跃的通话连接对象
let callStartTime = null; // 通话正式开始的时间戳
let durationTimer = null; // 用于更新时长的定时器

2. 改造来电处理逻辑 #

你的来电处理代码是Twilio.Device.incoming(_takeACall);，咱们就在_takeACall函数里监听通话的关键事件，触发计时的启动和停止：

function _takeACall(connection) {
  // 接听来电
  connection.accept();

  // 当通话正式建立连接时（此时才算真正开始计时）
  connection.on('connect', () => {
    activeCall = connection;
    callStartTime = Date.now(); // 记录通话启动的时间点
    
    // 启动每秒更新一次时长的定时器
    durationTimer = setInterval(updateCallDuration, 1000);
    updateCallDuration(); // 先初始化显示00:00
  });

  // 当通话断开时，清理定时器和状态变量
  connection.on('disconnect', () => {
    if (durationTimer) {
      clearInterval(durationTimer);
      durationTimer = null;
    }
    activeCall = null;
    callStartTime = null;
    // 更新页面显示通话结束的提示
    document.getElementById('call-duration').textContent = '通话已结束';
  });
}

3. 编写时长计算与格式化函数 #

写一个专门的函数，用来计算已通话时长并格式化成用户友好的MM:SS格式：

function updateCallDuration() {
  if (!callStartTime) return; // 还没开始通话就直接返回
  
  const elapsedMs = Date.now() - callStartTime;
  const totalSeconds = Math.floor(elapsedMs / 1000);
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;
  
  // 格式化时长，确保分钟和秒数都是两位数（比如02:35）
  const formattedDuration = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  
  // 更新页面上的时长显示元素（假设你有一个id为call-duration的span）
  document.getElementById('call-duration').textContent = formattedDuration;
}

4. 页面添加时长显示元素 #

最后在你的HTML里加一个用来展示时长的元素，比如：

<div class="call-info">
  当前通话时长：<span id="call-duration">00:00</span>
</div>

额外注意点 #

• 如果你的应用支持多通话并行，需要调整变量结构（比如用对象/数组）来管理每个通话的计时状态
• 务必在通话断开时清除定时器，避免内存泄漏
• 要是需要更精细的计时（比如毫秒级），可以缩小定时器间隔，但一般每秒更新一次就足够用户查看了

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