按音频文件的持续时间排序不起作用

Question

所以我尝试按照这个例子制作一个按照持续时间对音频文件进行排序的排序功能：

  

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table

在我的代码中，表格的第一列包含音频文件的名称。在第二列中有可播放的html音频播放器。 Here是一张照片。所以我尝试按照它们包含的音频持续时间对这些播放器进行排序。具有以下功能：

function sortByDuration() {
    var rows, switching, i, x, y, shouldSwitch;
    var 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:*/

            /*NOTE: The id's of the audio players start from 0*/
            /*Eg.: player0, player1, ... , playern*/

            /*Getting the current player*/
            var k = i - 1;
            var playerName1 = "player" + k;
            x = document.getElementById(playerName1);

            /*Getting the audio's duration from the player*/
            var durationTemp = x.duration.toFixed(0);
            var duration = parseInt(durationTemp);

            /*Getting the next player*/
            var playerName2 = "player" + i;
            y = document.getElementById(playerName2);
            var durationTemp2 = y.duration.toFixed(0);
            var duration2 = parseInt(durationTemp2);

            /*I tried and it loads the first two values*/
            alert(duration);
            alert(duration2);

            //check if the two rows should switch place:
            if (duration > duration2) {
                //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;
        }
    }
}

现在这个函数与按名称排序函数几乎相同，但修改后比较音频文件的长度（以秒为单位）。我的问题是，它进入一个无限循环，我检查索引，并尝试在这里和那里进行修改，但我似乎无法找到为什么它不能正常工作。有人能告诉我我做错了吗？

Answer 1

你问题的正切点，因为这与你的代码没有暂停的原因有关，但我有一点空白时间，并编写了一个稍微简单的模块化表格排序示例，它使用<array>.sort(comparator)构建的英寸

这与你所基于的w3schools模式有所不同，但可能适用于选择器中的一个小标签和id按摩，所以你或其他人可能会发现它都是有用的。

/*
    Example of a simple and a little overly verbose
    sorting set-up for <audio> elements in a table
    according to variable rules.

    This example links to royalty free music
    by Kevin MacLeod <https://incompetech.com>
*/

function songs_from_document() {
  var table = document.getElementById("table-design");
  var row_list = table.getElementsByTagName("tr");
  var row_count = row_list.length;
  var rows = [];
  for (var ix = 1; ix < row_count; ++ix) {
    var row = row_list[ix];
    var audio = row.getElementsByTagName("audio")[0];
    var title = row.getElementsByTagName("h3")[0];
    rows.push({
      row: row,
      audio: audio,
      title: title
    });
  }
  return rows;
}

function name_comparer_asc(song1, song2) {
  return song1.title.innerHTML.localeCompare(song2.title.innerHTML);
}

function name_comparer_desc(song1, song2) {
  return song2.title.innerHTML.localeCompare(song1.title.innerHTML);
}

function duration_comparer_asc(song1, song2) {
  return song1.audio.duration - song2.audio.duration;
}

function duration_comparer_desc(song1, song2) {
  return song2.audio.duration - song1.audio.duration;
}

function sort_songs(comparer) {
  var songs = songs_from_document().sort(comparer);
  var count = songs.length;
  var table = document.getElementById("table-design");
  while (table.childElementCount > 1) {
    table.removeChild(table.lastChild);
  }
  for (var ix = 0; ix < count; ++ix) {
    table.appendChild(songs[ix].row);
  }
}

function populate_table() {
  var songs = [
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Black%20Bird.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Aftermath.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Light%20Awash.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Ashton%20Manor.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Backbay%20Lounge.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Living%20Voyage.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Bet%20You%20Can%20ver%202.mp3",
    "https://incompetech.com/music/royalty-free/mp3-royaltyfree/Land%20of%20the%20Dead.mp3"
  ];
  var table = document.getElementById("table-design");
  while (table.childElementCount > 1) {
    table.removeChild(table.lastChild);
  }
  for (let i = 0, n = songs.length; i < n; ++i) {
    let tr = document.createElement("tr");
    let td1 = document.createElement("td");
    let td2 = document.createElement("td");
    let h3 = document.createElement("h3");
    let audio = document.createElement("audio");

    h3.innerHTML = unescape(songs[i].split("/").slice(-1));
    audio.setAttribute("controls", "true");
    audio.setAttribute("src", songs[i]);
    audio.setAttribute("type", "audio/mpeg");

    td1.appendChild(h3);
    td2.appendChild(audio);
    tr.appendChild(td1);
    tr.appendChild(td2);
    table.appendChild(tr);
  }
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>audio sort</title>
</head>

<body>
  <button onclick="populate_table()">populate table</button>
  <button onclick="sort_songs(name_comparer_asc)">by name asc</button>
  <button onclick="sort_songs(name_comparer_desc)">by name desc</button>
  <button onclick="sort_songs(duration_comparer_asc)">by duration asc</button>
  <button onclick="sort_songs(duration_comparer_desc)">by duration desc</button>
  <table id="table-design">
    <tr>
      <td><u>Song Title</u></td>
      <td><u>Audio Player</u></td>
    </tr>
  </table>
</body>

</html>