Сортировка аудиофайлов по длительности

Я храню аудиофайлы. Когда я их перечисляю, рядом с ними есть проигрыватель для предварительного просмотра. Это выглядит так:

Я пытаюсь добавить разные типы сортировки. Вот функция Сортировать по имени:

function sortTableByName() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("table-design");
  switching = true;
  /*Make a loop that will continue until no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare, one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

Это сработало. Затем я попробовал сортировка по длительности аудио.
И вот что меня смущает. Сортировать по имени прост, потому что он получает имена, хранящиеся в первом столбце, поэтому там есть только это значение:

x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
  //if so, mark as a switch and break the loop:
  shouldSwitch = true;
  break;
}

Но в случае сортировка по продолжительности второй столбец не содержит только значение, он содержит аудиоплеер, может ли кто-нибудь сказать мне, как обращаться к этим игрокам, чтобы я мог узнать их продолжительность?

Ниже представлен HTML-код таблицы:

<table id = "table-design">
  <thead>
    <tr>
      <th>File browser
        <select id = "list">
          <option value = "" disabled selected>Sort by</option>
          <option value = "1">Name(asc.)</option>
          <option value = "2">Name(desc.)</option>
          <option value = "4">Duration</option>
        </select>
      </th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    @foreach (var upload in Model) {
      <tr>
        <td>@Html.ActionLink(upload.Name, "Edit", "Audio", new { name = upload.Name }, null)</td>
        <td>
          <audio controls controlsList = "nodownload" preload = "metadata" id = "preview-player">
            <source src = "~/User_Data/@upload.UserId/@upload.Name" type = "audio/mpeg">
            Your browser does not support the audio element.
          </audio>
        </td>
        <td>
          <a href='@Url.Action("Download", "Audio", new {path = upload.Path})'>
            <img src='@Url.Content("~/Content/Images/download.png")' id = "download-image" title = "Download" />
          </a>
        </td>
        <td>
          <a href='@Url.Action("Delete", "Audio", new {id = upload.Id})'>
            <img src='@Url.Content("~/Content/Images/delete.png")' id = "delete-image" title = "Delete" />
          </a>
        </td>
      </tr>
    }
  </tbody>
</table>