:HTML/embed_music_list_pt

<link rel="stylesheet" type="text/css" media="screen" href="https://marines.sakura.ne.jp/script/tablesorter/theme/style.css" charset="Shift_JIS" />
<style type="text/css">
  tbody tr th {
    padding: 0 5px;
  }
  tbody tr td.number {
    text-align: center;
  }
  tbody tr td.mark {
    text-align: center;
  }
  tbody tr td.text {
    text-align: left;
  }
</style>
<script type="text/javascript" src="https://marines.sakura.ne.jp/script/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://marines.sakura.ne.jp/script/jquery.json2table.js"></script>
<script type="text/javascript">
  var musics;
  var table;
  var level_min = 1;
  var level_max = 399;
  var level_delta = 50;
  var notes_min = 0;
  var notes_max = 1399;
  var notes_delta = 100;

  $(document).ready(function() {
    $.getJSON('https://library.maplia.jp/json/musics_polytone.json', function(data) {
      musics = data;
      table = $('#table_musics');
      // レベルフィルタ
      select_level = $('#select_level');
      select_level.append($('<option/>', {
        value: -1, text: 'すべて'
      }));
      for (var i = level_min; i <= level_max; i += level_delta) {
        select_level.append($('<option/>', {
          value: i, text: (i == 1 ? -1 : i) + (level_delta == 1 ? '' : '～' + (i + level_delta - 1))
        }));
      }
      // ノート数フィルタ
      select_notes = $('#select_notes');
      select_notes.append($('<option/>', {
        value: -1, text: 'すべて'
      }));
      for (var i = notes_min; i <= notes_max; i += notes_delta) {
        select_notes.append($('<option/>', {
          value: i, text: i + '～' + (i + notes_delta - 1)
        }));
      }
      createMusicTable();
      filterMusicTable();
    });
  });

  function createMusicTable() {
    var table_data = {};
    table_data.thead_column_classes = [
      'style_th', 'style_th', 'style_th', 'style_th', 'style_th'
    ];
    table_data.tbody_column_classes = [
      'style_th', 'text', 'mark', 'number', 'number'
    ];
    table_data.thead = [];
    table_data.tbody = [];
    table_data.thead[0] = {
      values: ['#', 'タイトル', '難易度', 'レベル', 'ノート数']
    };

    $.each(musics, function(i, music) {
      if (music.music_deleted) {
        return true;
      }

      const charts = {
        'bsc': music.basic, 'adv': music.advanced,
        'hrd': music.hard,  'exp': music.expert
      };
      const full_title = music.title
        + (typeof music.subtitle === "undefined" ? '' : ' <small>' + music.subtitle + '</small>');

      $.each(charts, function(key, chart) {
        if (typeof chart === 'undefined') {
          return true;
        }
        if (chart.level) {
          const class_name = 'chart_pt_' + (chart.level == -1 ? 'chs' : key);
          const number = '－';
          table_data.tbody[table_data.tbody.length] = {
            id: music.id + '_' + key,
            class_name: class_name,
            values: [
              number, full_title, key, chart.level, chart.notes
            ]
          };
        }
      });
    });

    table.json2table(table_data);
    table.tablesorter({sortList: [[3, 1]]});
  }

  function filterMusicTable() {
    const mode = parseInt($(':radio[name="mode"]:checked').val());
    const diff = parseInt($(':radio[name="diff"]:checked').val());
    const level = parseInt($('select[name="level"]').val());
    const notes = parseInt($('select[name="notes"]').val());
    let count = 0;

    $('#table_musics tbody tr').each(function (i, item) {
      const item_level = parseInt($(item).find('td')[2].innerText);
      const item_notes = parseInt($(item).find('td')[3].innerText);

      $(item).show();
      // 難易度フィルタ
      if (item.id.indexOf('_bsc') > -1 && ![0, 1].includes(diff)) {
        $(item).hide(); return true;
      }
      if (item.id.indexOf('_adv') > -1 && ![0, 2].includes(diff)) {
        $(item).hide(); return true;
      }
      if (item.id.indexOf('_hrd') > -1 && ![0, 3].includes(diff)) {
        $(item).hide(); return true;
      }
      if (item.id.indexOf('_exp') > -1 && ![0, 4].includes(diff)) {
        $(item).hide(); return true;
      }
      // レベルフィルタ
      if ((level != -1) && (item_level < (level == 1 ? -1 : level) || (item_level >= level + level_delta))) {
        $(item).hide(); return true;
      }
      // ノート数フィルタ
      if ((notes != -1) && (item_notes < notes || (item_notes >= notes + notes_delta))) {
        $(item).hide(); return true;
      }
      count++;
    });
    if (count <= 0) {
      $('#table_rows').text('フィルター条件に該当する譜面はありません');
    } else {
      $('#table_rows').text(count + '譜面が該当しました');
    }
  }
</script>
<div>
  <p>
    難易度フィルター: 
    <label><input type="radio" name="diff" value="0" onchange="filterMusicTable()" checked="checked"> 全譜面</label>
    <label><input type="radio" name="diff" value="1" onchange="filterMusicTable()"> basic</label>
    <label><input type="radio" name="diff" value="2" onchange="filterMusicTable()"> advanced</label>
    <label><input type="radio" name="diff" value="3" onchange="filterMusicTable()"> hard</label>
    <label><input type="radio" name="diff" value="4" onchange="filterMusicTable()"> expert</label>
  </p>
  <p>
    レベルフィルター: <select id="select_level" name="level" onchange="filterMusicTable()"></select>
    / 
    ノート数フィルター: <select id="select_notes" name="notes" onchange="filterMusicTable()"></select>
  </p>
  <p id="table_rows"></p>
  <table id="table_musics" class="tablesorter style_table" cellspacing="1" border="0"></table>
</div>