按音频文件时长排序功能失效，求技术解决方法

我明白你遇到的问题了——参照通用表格排序示例改音频时长排序时，因为目标列是<audio>元素而非普通文本/数字，直接用原逻辑肯定行不通。咱们一步步来修复这个问题：

问题核心 #

原W3Schools的排序逻辑是对比单元格的文本内容，但你的第二列是可播放的音频控件，需要提取音频的duration属性（秒数）作为排序依据，还要注意：音频可能还没加载完成，此时duration会返回NaN，得提前处理这种情况。

修复后的完整排序函数 #

function sortByDuration() {
  const table = document.querySelector("table");
  let switching = true;
  let shouldSwitch;
  let dir = "asc"; // 默认升序
  let switchCount = 0;

  // 循环直到没有切换发生
  while (switching) {
    switching = false;
    const rows = table.rows;

    // 遍历除表头外的所有行
    for (let i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      
      // 获取当前行和下一行的audio元素
      const audioX = rows[i].getElementsByTagName("audio")[0];
      const audioY = rows[i + 1].getElementsByTagName("audio")[0];

      // 处理音频未加载的情况：先尝试加载，或默认设为0（可根据需求调整）
      let durationX = audioX.duration || 0;
      let durationY = audioY.duration || 0;

      // 处理NaN的情况（音频加载失败/还没加载）
      if (isNaN(durationX)) durationX = 0;
      if (isNaN(durationY)) durationY = 0;

      // 根据排序方向对比时长
      if (dir === "asc") {
        if (durationX > durationY) {
          shouldSwitch = true;
          break;
        }
      } else if (dir === "desc") {
        if (durationX < durationY) {
          shouldSwitch = true;
          break;
        }
      }
    }

    if (shouldSwitch) {
      // 交换行位置
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchCount++;
    } else {
      // 如果没有切换，且当前是升序，切换为降序再循环一次
      if (switchCount === 0 && dir === "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

关键改进点 #

• 提取音频时长：通过getElementsByTagName("audio")[0]获取每行的音频元素，再读取duration属性
• 处理未加载状态：给未加载/加载失败的音频设置默认时长（这里用0，你也可以改成一个极大值放到最后）
• 支持升降序切换：第一次点击升序，第二次点击降序，符合常规交互
• 跳过表头：循环从i=1开始，避免表头参与排序

配套HTML示例 #

确保你的表格结构类似这样（第二列包含<audio>标签）：

<table>
  <thead>
    <tr>
      <th>文件名</th>
      <th onclick="sortByDuration()">时长 ▼</th> <!-- 点击表头触发排序 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>音频1.mp3</td>
      <td><audio src="audio1.mp3" controls></audio></td>
    </tr>
    <tr>
      <td>音频2.mp3</td>
      <td><audio src="audio2.mp3" controls></audio></td>
    </tr>
  </tbody>
</table>

额外提示 #

如果音频文件较大，可能需要监听loadedmetadata事件确保时长已加载完成，可以在页面加载时提前预加载音频的元数据：

// 预加载所有音频的元数据
document.querySelectorAll("audio").forEach(audio => {
  audio.load(); // 触发元数据加载
  audio.addEventListener("loadedmetadata", () => {
    console.log(`音频${audio.src}时长已加载：${audio.duration}秒`);
  });
});

这样就能确保排序时获取到准确的时长啦！

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