Chrome扩展音频播放时分秒控制栏不显示问题求助

问题分析 #

你的代码仅完成了音频时长的计算逻辑，但没有将计算好的时/分/秒文本更新到页面的控制栏元素中，同时缺少数字补零处理（比如秒数为5时应显示05而非5），这会导致时长格式不规范，且用户无法看到计算后的结果。

修复方案 #

1. 添加数字补零工具函数 #

先定义一个工具函数，确保分钟、秒数这类小于10的数字自动补零，保证时长格式统一：

function padZero(num) {
  return num.toString().padStart(2, '0');
}

2. 将计算结果插入控制栏元素 #

假设你的页面中存在一个用于显示总时长的元素（比如id="total-duration"），修改原代码将计算后的时长文本插入到该元素中：

$("#audio").on("canplaythrough", function(e){
    var seconds = e.currentTarget.duration;
    var duration = moment.duration(seconds, "seconds");
    
    var time = "";
    var hours = duration.hours();
    if (hours > 0) { 
      // 小时数同样需要补零处理
      time += padZero(hours) + ":" ; 
    }
    
    // 对分钟和秒数统一补零
    time += padZero(duration.minutes()) + ":" + padZero(duration.seconds());    
    
    // 将时长文本插入到控制栏的对应元素
    $("#total-duration").text(time);

    URL.revokeObjectURL(objectUrl);
});

3. 确保控制栏元素存在 #

如果使用自定义控制栏，需要在HTML中添加对应的显示元素，示例如下：

<!-- 自定义音频控制栏示例结构 -->
<div class="audio-controls">
  <audio id="audio" controls></audio>
  <span id="current-time">00:00</span> / <span id="total-duration">00:00</span>
</div>

4. 实时更新播放进度（可选） #

如果需要显示当前播放的实时时长，可监听timeupdate事件同步更新：

$("#audio").on("timeupdate", function(e){
    var currentSeconds = e.currentTarget.currentTime;
    var currentDuration = moment.duration(currentSeconds, "seconds");
    
    var currentTime = "";
    var currentHours = currentDuration.hours();
    if (currentHours > 0) { 
      currentTime += padZero(currentHours) + ":" ; 
    }
    currentTime += padZero(currentDuration.minutes()) + ":" + padZero(currentDuration.seconds());    
    
    $("#current-time").text(currentTime);
});

5. 扩展权限与资源注意事项 #

Chrome扩展中需确保音频资源路径正确，若使用本地音频，需在manifest.json中声明资源访问权限；如果依赖moment.js，需确认该库已正确引入到扩展中。

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