Update

db/master.json

@@ -114,6 +114,18 @@
           "spotify": "1Ogp4yK6RFM50S1RKqU21b",
           "youtube": "UCdGCfJqGjqmIOkpskWVz8Jw"
         }
+      },
+      {
+        "uuid": "018dadeb-101f-7ae2-a287-ad5d4b98d011",
+        "mbid": "fbd0f271-dc3d-444a-868b-c97d3b861608",
+        "name": "Alva Gracia",
+        "nameLatin": null,
+        "nameFileName": null,
+        "link": {
+          "itunes": 1408806188,
+          "spotify": "3XIfUQhOkgdfKXzL6bUX07",
+          "youtube": "UCr4NUDFAd9wchdDk-EtQl7Q"
+        }
       }
     ],
     "codecs": [
@@ -143,7 +155,35 @@
         "bitDepth": 24,
         "sampleRate": 48000,
         "channelCount": 2,
-        "encodeParams": null
+        "encodeParams": "flac -V -l 12 -b 4608 -m -r 8 -A subdivide_tukey(5)"
+      },
+      {
+        "uuid": "018dade4-df3d-7552-92f4-6babc27d7c2d",
+        "nameBasic": "FLAC",
+        "nameLong": "Free Lossless Audio Codec",
+        "extension": "flac",
+        "isCompress": true,
+        "isLossless": true,
+        "bitRateAvg": null,
+        "bitRateMax": 2116800,
+        "bitDepth": 24,
+        "sampleRate": 44100,
+        "channelCount": 2,
+        "encodeParams": "flac -V -l 12 -b 4608 -m -r 8 -A subdivide_tukey(5)"
+      },
+      {
+        "uuid": "018db181-e98a-78d1-acc3-84590681af8d",
+        "nameBasic": "FLAC",
+        "nameLong": "Free Lossless Audio Codec",
+        "extension": "flac",
+        "isCompress": true,
+        "isLossless": true,
+        "bitRateAvg": null,
+        "bitRateMax": 1411200,
+        "bitDepth": 16,
+        "sampleRate": 44100,
+        "channelCount": 2,
+        "encodeParams": "flac -V -l 12 -b 4608 -m -r 8 -A subdivide_tukey(5)"
       },
       {
         "uuid": "018d2821-51f1-7203-bd3d-34ff786250f3",
@@ -159,6 +199,20 @@
         "channelCount": 2,
         "encodeParams": "qaac64 --tvbr 127 -q 2 --rate keep --no-delay --gapless-mode 0 --threading"
       },
+      {
+        "uuid": "018dadbb-c8d6-7a2f-ab0c-67ccfbda28b0",
+        "nameBasic": "AAC-LC",
+        "nameLong": "Advanced Audio Coding - Low Complexity",
+        "extension": "m4a",
+        "isCompress": true,
+        "isLossless": false,
+        "bitRateAvg": 320000,
+        "bitRateMax": 384000,
+        "bitDepth": null,
+        "sampleRate": 44100,
+        "channelCount": 2,
+        "encodeParams": "qaac64 --tvbr 127 -q 2 --rate keep --no-delay --gapless-mode 0 --threading"
+      },
       {
         "uuid": "018d2821-51f2-75aa-856a-a02ff306eb55",
         "nameBasic": "HE-AAC",
@@ -173,6 +227,20 @@
         "channelCount": 2,
         "encodeParams": "qaac64 --cvbr 64 --he -q 2 --rate keep --gapless-mode 0 --threading"
       },
+      {
+        "uuid": "018dadbb-c8d6-7a2f-ab0c-67cd22beae91",
+        "nameBasic": "HE-AAC",
+        "nameLong": "Advanced Audio Coding - High Efficiency",
+        "extension": "m4a",
+        "isCompress": true,
+        "isLossless": false,
+        "bitRateAvg": 64000,
+        "bitRateMax": 72000,
+        "bitDepth": null,
+        "sampleRate": 44100,
+        "channelCount": 2,
+        "encodeParams": "qaac64 --cvbr 64 --he -q 2 --rate keep --gapless-mode 0 --threading"
+      },
       {
         "uuid": "018d5a94-8aac-740d-b5f7-4d9b87396715",
         "nameBasic": "Opus",
@@ -542,6 +610,298 @@
             "durationSamples": 29235967
           }
         ]
+      },
+      {
+        "uuid": "018dadbb-c8d6-7a2f-ab0c-67ca1174150f",
+        "mbid": null,
+        "releaseDate": "2022-02-10",
+        "title": "Emotions Like",
+        "titleLatin": null,
+        "artist": ["018dadeb-101f-7ae2-a287-ad5d4b98d011"],
+        "barCode": 0,
+        "isCompilation": false,
+        "copyright": "(C) 2022 NCS",
+        "link": {
+          "itunes": 1600594931,
+          "spotify": "4j3Nf5FXhfkkQg45VMR8kB"
+        },
+        "isAllTrackSameCodecs": true,
+        "codecs": [
+          {
+            "uuid": "018dade4-df3d-7552-92f4-6babc27d7c2d",
+            "isOriginal": true,
+            "path": "flac"
+          },
+          {
+            "uuid": "018dadbb-c8d6-7a2f-ab0c-67ccfbda28b0",
+            "isOriginal": false,
+            "path": "aac_320k"
+          },
+          {
+            "uuid": "018d5a94-8aac-740d-b5f7-4d9b87396715",
+            "isOriginal": false,
+            "path": "opus_144k"
+          },
+          {
+            "uuid": "018d5a94-8aac-740d-b5f7-4d9cc9b69c80",
+            "isOriginal": false,
+            "path": "opus_64k"
+          },
+          {
+            "uuid": "018dadbb-c8d6-7a2f-ab0c-67cd22beae91",
+            "isOriginal": false,
+            "path": "aac_64k"
+          }
+        ],
+        "isCoverArtsUseDefault": true,
+        "coverArts": null,
+        "coverArtPotatoWebp16pxBase64": "UklGRogAAABXRUJQVlA4IHwAAACwAgCdASoQABAAAsBMJbACdFQgFP6Vz2DJZk4TAEAA9nf6Nl24aeSn/h35Ew6k9s21LQiHfti34M/xDWoIJr1w+sWP0hQFVFfNUxPc1Rr6zx+oLqPmTtf5xgz4a0jQ+6IAMoZ9jYHScTu801+xX+HmAJTFZ5et7oprzwAA",
+        "tracks": [
+          {
+            "uuid": "018dadbb-c8d6-7a2f-ab0c-67cb223970ec",
+            "disc": 1,
+            "index": 1,
+            "title": "Emotions Like",
+            "titleLatin": null,
+            "titleFileName": null,
+            "artist": ["018dadeb-101f-7ae2-a287-ad5d4b98d011"],
+            "lyricist": null,
+            "composer": null,
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 6846000
+          }
+        ]
+      },
+      {
+        "uuid": "018dae76-ab7d-7287-a65c-50f5493a7456",
+        "mbid": "1d721d0c-82a7-4667-b28a-c58a2429e8e2",
+        "releaseDate": "2022-11-22",
+        "title": "planetarium",
+        "titleLatin": null,
+        "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+        "barCode": 859758916831,
+        "isCompilation": false,
+        "copyright": "(C) 2022 Aqu3ra",
+        "link": {
+          "itunes": 1652622029,
+          "spotify": "0wrOe41JwHY2fTeueb9Cbu"
+        },
+        "isAllTrackSameCodecs": true,
+        "codecs": [
+          {
+            "uuid": "018db181-e98a-78d1-acc3-84590681af8d",
+            "isOriginal": true,
+            "path": "flac"
+          },
+          {
+            "uuid": "018dadbb-c8d6-7a2f-ab0c-67ccfbda28b0",
+            "isOriginal": false,
+            "path": "aac_320k"
+          },
+          {
+            "uuid": "018d5a94-8aac-740d-b5f7-4d9b87396715",
+            "isOriginal": false,
+            "path": "opus_144k"
+          },
+          {
+            "uuid": "018d5a94-8aac-740d-b5f7-4d9cc9b69c80",
+            "isOriginal": false,
+            "path": "opus_64k"
+          },
+          {
+            "uuid": "018dadbb-c8d6-7a2f-ab0c-67cd22beae91",
+            "isOriginal": false,
+            "path": "aac_64k"
+          }
+        ],
+        "isCoverArtsUseDefault": true,
+        "coverArts": null,
+        "coverArtPotatoWebp16pxBase64": "UklGRoAAAABXRUJQVlA4IHQAAAAQAgCdASoQABAAAsBMJbACdAEO+W9L0HFAAP75R85WcMwQulyASIsZfYcJSGfPgcYcdqBsf3bTqVyxaUpZ0mVG3pyqv8JZCXK3fkTEobJ/y3H+uaRf8Qmi4iF7dBbwk1zoNvHDgcYbTD8FNz4wsSUIPwAAAA==",
+        "tracks": [
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d4f03a570d",
+            "disc": 1,
+            "index": 1,
+            "title": "Sleeping Awake",
+            "titleLatin": null,
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9599019
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d5fa064c3d",
+            "disc": 1,
+            "index": 2,
+            "title": "アイボリー",
+            "titleLatin": "Ivory",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 8690668
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d6038a8268",
+            "disc": 1,
+            "index": 3,
+            "title": "ロンリーユニバース",
+            "titleLatin": "Lonely Universe",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9657900
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d7bf4c12af",
+            "disc": 1,
+            "index": 4,
+            "title": "メーデー",
+            "titleLatin": "Mayday",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9641865
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d802fed938",
+            "disc": 1,
+            "index": 5,
+            "title": "ラムネ",
+            "titleLatin": "Ramune",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9426375
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46d9ad4b6697",
+            "disc": 1,
+            "index": 6,
+            "title": "ゴーストダンス",
+            "titleLatin": "Ghost Dance",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 10079290
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46da55192a4c",
+            "disc": 1,
+            "index": 7,
+            "title": "シックス・フィート・アンダー",
+            "titleLatin": "Six Feet Under",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9497747
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46db82fdf937",
+            "disc": 1,
+            "index": 8,
+            "title": "ミッドナイトサン",
+            "titleLatin": "MidnightSun",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9523328
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46dce8f44275",
+            "disc": 1,
+            "index": 9,
+            "title": "Day&Night",
+            "titleLatin": null,
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9235721
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46ddf81d0461",
+            "disc": 1,
+            "index": 10,
+            "title": "解けない夏",
+            "titleLatin": "Tokenai Natsu",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9525600
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46de48d8d5ea",
+            "disc": 1,
+            "index": 11,
+            "title": "アイスドロップ",
+            "titleLatin": "Ice Drop",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 9916150
+          },
+          {
+            "uuid": "018dae75-e118-7e89-bfaf-46dfd37e561d",
+            "disc": 1,
+            "index": 12,
+            "title": "真夜中のダイバー",
+            "titleLatin": "Midnight Diver",
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 6968825
+          },
+          {
+            "uuid": "018dae75-e119-784d-93da-3566d8057f01",
+            "disc": 1,
+            "index": 13,
+            "title": "Namioto",
+            "titleLatin": null,
+            "titleFileName": null,
+            "artist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "lyricist": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "composer": ["018d286b-9507-70d9-b4cd-17416f6d8d64"],
+            "arranger": null,
+            "codecs": null,
+            "durationSamples": 8424000
+          }
+        ]
       }
     ]
   }

index.html

@@ -38,7 +38,11 @@
     <div id="mainContainer" class="container px-4 my-4">
       <h1 class="user-select-none text-center">discography_v2_cdn_front</h1>
       <hr class="my-4">
-      <button id="showSettingsModalButton" class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#settingsModal"><i class="bi bi-gear-wide-connected me-1"></i>Settings</button>
+      <div id="topMenuButtonContainer" class="text-center">
+        <a class="btn btn-primary mx-1" href="#albumAllListTitleLabel" role="button">Album List</a>
+        <a class="btn btn-primary mx-1" href="#trackAllListTitleLabel" role="button">Track List</a>
+        <button id="showSettingsModalButton" class="btn btn-primary mx-1" type="button" data-bs-toggle="modal" data-bs-target="#settingsModal"><!-- <i class="bi bi-gear-wide-connected me-1"></i> -->Settings</button>
+      </div>
       <div class="modal fade user-select-none" id="settingsModal" tabindex="-1">
         <div class="modal-dialog modal-dialog-scrollable">
           <div class="modal-content">
@@ -66,7 +70,7 @@
         </div>
       </div>
       <hr class="my-4">
-      <h3 class="mb-3 user-select-none">Album List</h3>
+      <h3 id="albumAllListTitleLabel" class="mb-3 user-select-none">Album List</h3>
       <div class="fetchingDataNowLabel user-select-none d-none">
         <div class="d-inline-flex align-items-center mb-3">
           <div class="spinner-border text-primary me-2" role="status">
@@ -77,7 +81,7 @@
       </div>
       <div id="albumAllCardGroup" class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4 user-select-none"></div>
       <hr class="my-4">
-      <h3 class="mb-3 user-select-none">Track List</h3>
+      <h3 id="trackAllListTitleLabel" class="mb-3 user-select-none">Track List</h3>
       <div class="fetchingDataNowLabel user-select-none d-none">
         <div class="d-inline-flex align-items-center mb-3">
           <div class="spinner-border text-primary me-2" role="status">
@@ -101,57 +105,59 @@
               <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
             </div>
             <div class="modal-body">
-              <h3>Metadata</h3>
-              <h4>General</h4>
-              <table class="table table-sm table-responsive table-hover table-borderless align-middle">
-                <tbody>
-                  <tr>
-                    <td>Album Title</td>
-                    <td id="albumInfoModal-metadataTable-albumTitle">---</td>
-                  </tr>
-                  <tr>
-                    <td>Album Artist</td>
-                    <td id="albumInfoModal-metadataTable-albumArtist">---</td>
-                  </tr>
-                  <tr>
-                    <td>Album Released</td>
-                    <td id="albumInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td>
-                  </tr>
-                  <tr>
-                    <td>Album Barcode</td>
-                    <td id="albumInfoModal-metadataTable-albumBarcode">Sample Number</td>
-                  </tr>
-                  <tr>
-                    <td>Album Copyright</td>
-                    <td id="albumInfoModal-metadataTable-albumCopyright">---</td>
-                  </tr>
-                </tbody>
-              </table>
-              <h4>Track List</h4>
-              <div id="albumInfoModal-trackAllListGroup" class="list-group user-select-none mb-4">
-                <!-- <button type="button" class="list-group-item list-group-item-action d-flex" disabled>
-                  <div class="flex-fill w-100">Artist</div>
-                  <div class="flex-fill w-100">Track</div>
-                </button> -->
-              </div>
-              <h4>External Links</h4>
-              <table id="albumInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle">
-                <tbody id="albumInfoModal-externalLinkTable">
-                </tbody>
-              </table>
-              <h4>Cover Artwork Images</h4>
-              <div class="mb-3" id="albumInfoModal-coverArtLinkDiv">
-              </div>
-              <div id="debugAreaSection" class="d-none">
-                <h3>Debug Area</h3>
-                <div class="accordion" id="albumInfoModal-DebugAcd">
-                  <div class="accordion-item">
-                    <h2 class="accordion-header">
-                      <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#albumInfoModal-DebugAcdInCollapse">Parsed data output (album)</button>
-                    </h2>
-                    <div id="albumInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#albumInfoModal-DebugAcd">
-                      <div class="accordion-body">
-                        <pre class=""><code id="albumInfoModal-DebugAcdOutputEl"></code></pre>
+              <div id="albumInfoModalContent" class="bg-transparent position-relative">
+                <h3>Metadata</h3>
+                <h4>General</h4>
+                <table class="table table-sm table-responsive table-hover table-borderless align-middle">
+                  <tbody>
+                    <tr>
+                      <td>Album Title</td>
+                      <td id="albumInfoModal-metadataTable-albumTitle">---</td>
+                    </tr>
+                    <tr>
+                      <td>Album Artist</td>
+                      <td id="albumInfoModal-metadataTable-albumArtist">---</td>
+                    </tr>
+                    <tr>
+                      <td>Album Released</td>
+                      <td id="albumInfoModal-metadataTable-albumReleaseDate">YYYY/MM/DD</td>
+                    </tr>
+                    <tr>
+                      <td>Album Barcode</td>
+                      <td id="albumInfoModal-metadataTable-albumBarcode">Sample Number</td>
+                    </tr>
+                    <tr>
+                      <td>Album Copyright</td>
+                      <td id="albumInfoModal-metadataTable-albumCopyright">---</td>
+                    </tr>
+                  </tbody>
+                </table>
+                <h4>Track List</h4>
+                <div id="albumInfoModal-trackAllListGroup" class="list-group user-select-none mb-4">
+                  <!-- <button type="button" class="list-group-item list-group-item-action d-flex" disabled>
+                    <div class="flex-fill w-100">Artist</div>
+                    <div class="flex-fill w-100">Track</div>
+                  </button> -->
+                </div>
+                <h4>External Links</h4>
+                <table id="albumInfoModal-externalLinkTableRoot" class="table table-sm table-responsive table-hover table-borderless align-middle">
+                  <tbody id="albumInfoModal-externalLinkTable">
+                  </tbody>
+                </table>
+                <h4>Cover Artwork Images</h4>
+                <div class="mb-3" id="albumInfoModal-coverArtLinkDiv">
+                </div>
+                <div id="debugAreaSection" class="d-none">
+                  <h3>Debug Area</h3>
+                  <div class="accordion" id="albumInfoModal-DebugAcd">
+                    <div class="accordion-item">
+                      <h2 class="accordion-header">
+                        <button class="accordion-button collapsed user-select-none" type="button" data-bs-toggle="collapse" data-bs-target="#albumInfoModal-DebugAcdInCollapse">Parsed data output (album)</button>
+                      </h2>
+                      <div id="albumInfoModal-DebugAcdInCollapse" class="accordion-collapse collapse" data-bs-parent="#albumInfoModal-DebugAcd">
+                        <div class="accordion-body">
+                          <pre class=""><code id="albumInfoModal-DebugAcdOutputEl"></code></pre>
+                        </div>
                       </div>
                     </div>
                   </div>

script.js

@@ -188,8 +188,8 @@ function loadTrackInfoModal (trackUuid) {
     document.getElementById('trackInfoModal-metadataTable-artists').setAttribute('data-bs-toggle', 'tooltip');
     document.getElementById('trackInfoModal-metadataTable-artists').setAttribute('data-bs-title', trackParsedObject.artist.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
   } else {
-    document.getElementById('trackInfoModal-metadataTable-artistsLatin').removeAttribute('data-bs-toggle');
-    document.getElementById('trackInfoModal-metadataTable-artistsLatin').removeAttribute('data-bs-title');
+    document.getElementById('trackInfoModal-metadataTable-artists').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal-metadataTable-artists').removeAttribute('data-bs-title');
   }
   if (trackParsedObject.lyricist === null) {
     document.getElementById('trackInfoModal-metadataTable-lyricist').parentNode.classList.add('d-none');
@@ -237,7 +237,7 @@ function loadTrackInfoModal (trackUuid) {
     }
   }
   document.getElementById('trackInfoModal-metadataTable-trackDurationReadable').innerHTML = msecToReadableTime(trackParsedObject.durationMsecs);
-  document.getElementById('trackInfoModal-metadataTable-trackDurationMsec').innerHTML = `${trackParsedObject.durationMsecs} ms`;
+  document.getElementById('trackInfoModal-metadataTable-trackDurationMsec').innerHTML = `${Math.ceil(trackParsedObject.durationMsecs)} ms`;
   document.getElementById('trackInfoModal-metadataTable-trackDurationSamples').innerHTML = `${trackParsedObject.durationSamples} samples`;
   document.getElementById('trackInfoModal-metadataTable-albumTitle').innerHTML = albumParsedObject.title;
   if (albumParsedObject.titleLatin === null) {
@@ -369,6 +369,8 @@ function loadTrackInfoModal (trackUuid) {
   const bootstrapTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
   document.getElementById('trackInfoModal-DebugAcdOutputEl').innerHTML = JSON.stringify(albumParsedObject, '', '  ');
+  document.getElementById('trackInfoModal-ModalCloseButton').addEventListener('click', () => {allAudioElementStop()});
+  document.getElementById('trackInfoModal-ModalCloseIconButton').addEventListener('click', () => {allAudioElementStop()});
   const trackInfoModal = new bootstrap.Modal(document.getElementById('trackInfoModal'));
   trackInfoModal.show();
 }
@@ -389,8 +391,8 @@ function loadTrackInfoModal2 (trackUuid) {
     document.getElementById('trackInfoModal2-metadataTable-artists').setAttribute('data-bs-toggle', 'tooltip');
     document.getElementById('trackInfoModal2-metadataTable-artists').setAttribute('data-bs-title', trackParsedObject.artist.map((obj) => {if (obj.nameLatin !== null) {return obj.nameLatin} else {return obj.name}}).join(', '));
   } else {
-    document.getElementById('trackInfoModal2-metadataTable-artistsLatin').removeAttribute('data-bs-toggle');
-    document.getElementById('trackInfoModal2-metadataTable-artistsLatin').removeAttribute('data-bs-title');
+    document.getElementById('trackInfoModal2-metadataTable-artists').removeAttribute('data-bs-toggle');
+    document.getElementById('trackInfoModal2-metadataTable-artists').removeAttribute('data-bs-title');
   }
   if (trackParsedObject.lyricist === null) {
     document.getElementById('trackInfoModal2-metadataTable-lyricist').parentNode.classList.add('d-none');
@@ -438,7 +440,7 @@ function loadTrackInfoModal2 (trackUuid) {
     }
   }
   document.getElementById('trackInfoModal2-metadataTable-trackDurationReadable').innerHTML = msecToReadableTime(trackParsedObject.durationMsecs);
-  document.getElementById('trackInfoModal2-metadataTable-trackDurationMsec').innerHTML = `${trackParsedObject.durationMsecs} ms`;
+  document.getElementById('trackInfoModal2-metadataTable-trackDurationMsec').innerHTML = `${Math.ceil(trackParsedObject.durationMsecs)} ms`;
   document.getElementById('trackInfoModal2-metadataTable-trackDurationSamples').innerHTML = `${trackParsedObject.durationSamples} samples`;
   document.getElementById('trackInfoModal2-metadataTable-albumTitle').innerHTML = albumParsedObject.title;
   if (albumParsedObject.titleLatin === null) {
@@ -570,6 +572,8 @@ function loadTrackInfoModal2 (trackUuid) {
   const bootstrapTooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
   bootstrapTooltipList = [...bootstrapTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
   document.getElementById('trackInfoModal2-DebugAcdOutputEl').innerHTML = JSON.stringify(albumParsedObject, '', '  ');
+  document.getElementById('trackInfoModal2-ModalCloseButton').addEventListener('click', () => {allAudioElementStop()});
+  document.getElementById('trackInfoModal2-ModalCloseIconButton').addEventListener('click', () => {allAudioElementStop()});
   const trackInfoModal2 = new bootstrap.Modal(document.getElementById('trackInfoModal2'));
   trackInfoModal2.show();
 }
@@ -998,6 +1002,15 @@ function writeAppSettingsToLocalStorage () {
   console.log(`Wrote appSettings:\n${JSON.stringify(appSettingsSaveData)}`);
 }
 
+// ========== 全てのAudio要素をStop ==========
+
+function allAudioElementStop () {
+  let audioElements = document.getElementsByTagName('audio');
+  for (let i = 0; i < audioElements.length; i++) {
+    audioElements[i].pause();
+  }
+}
+
 // ========== その他使い回す汎用関数など ==========
 
 function msecToReadableTime (msec) {
@@ -1006,4 +1019,4 @@ function msecToReadableTime (msec) {
   let min = ('00' + Math.floor(sec / 60)).slice(-2);
   let secPart = ('00' + Math.floor(sec % 60)).slice(-2);
   return `${min}:${secPart}.${('000' + msecCeiled % 1000).slice(-3)}`;
-}
+}