SoundFontファイルを変更したときに複数ローディングが表示される問題を修正。

一部の処理を最適化
logue · Oct 5, 2023 · 8f35f8c · 8f35f8c
1 parent befc840
commit 8f35f8c
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 66 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,7 @@ import SoundFont from '@logue/sf2synth';
 const option = {
   // Url to SoundFont file.
   url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/Yamaha XG Sound Set.sf2', // Default
+  // url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/A320U.sf2', // Same as original sf2synth.js
   // Enter the ID of the destination DOM. If left blank, it will be added to the end of body.
   placeholder: 'placeholder',
   // Displays the MIDI keyboard GUI. Set it to false if you don't need. Since it does not process the drawing load, the operation becomes lighter.

diff --git a/index.html b/index.html
@@ -75,33 +75,28 @@ <h1 class="h2">
       </header>
       <main>
         <div id="drag" class="mb-3">
-          <label class="form-label" for="file">Load SoundFont2 file</label>
-          <input
-            type="file"
-            class="form-control"
-            id="file"
-            accept="audio/x-soundfont"
-            aria-describedby="fileHelp"
-          />
-          <!--
-            <button
-              class="btn btn-outline-secondary dropdown-toggle"
-              type="button"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
+          <div class="input-group">
+            <label class="input-group-text" for="file">
+              Upload own *.sf2 file
+            </label>
+            <input
+              type="file"
+              class="form-control"
+              id="file"
+              accept="audio/x-soundfont"
+              aria-describedby="fileHelp"
+            />
+            <select
+              class="form-select"
+              aria-label="Load SoundFont2 file"
+              id="selector"
             >
-              Default
-            </button>
-            <ul class="dropdown-menu">
-              <li><a class="dropdown-item" href="#">Yamaha XG SoundFont</a></li>
-              <li>
-                <a class="dropdown-item" href="#">
-                  Yamaha XG Sound Set Ver.2.0
-                </a>
-              </li>
-              <li><a class="dropdown-item" href="#">A320U.sf2</a></li>
-            </ul>
-          -->
+              <option selected value="Yamaha XG Sound Set.sf2">
+                Yamaha XG SoundFont.sf2
+              </option>
+              <option value="A320U.sf2">A320U.sf2</option>
+            </select>
+          </div>
           <div id="fileHelp" class="form-text">
             drag and drop here *.sf2 file to change sound font.
           </div>
@@ -144,6 +139,8 @@ <h1 class="h2">
           const build = document.getElementById('build');
           /** @type {HTMLInputElement} */
           const toggleDarkMode = document.getElementById('toggleDarkMode');
+          /** @type {HTMLSelectElement} */
+          const selector = document.getElementById('selector');
 
           // Apply build time
           build.dateTime = SoundFont.build;
@@ -156,7 +153,7 @@ <h1 class="h2">
             dragArea.classList.remove('bg-info');
             document.getElementById('soundfont').innerText = decodeURIComponent(
               wml.getUrl()
-            ).match('.+/(.+?)([\?#;].*)?$')[1];
+            ).match('.+/(.+?)([?#;].*)?$')[1];
           });
           wml.setup();
 
@@ -239,6 +236,13 @@ <h1 class="h2">
           toggleDarkMode.addEventListener('change', e => {
             wml.setColorMode(e.target.checked ? 'dark' : 'light');
           });
+
+          selector.addEventListener('change', () => {
+            console.log(selector.value);
+            wml.setup(
+              `https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/${selector.value}`
+            );
+          });
         },
         false
       );

diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "stylelint-config-recommended-scss": "^13.0.0",
     "stylelint-order": "^6.0.3",
     "stylelint-prettier": "^4.0.2",
-    "vite": "^4.4.10",
+    "vite": "^4.4.11",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-checker": "^0.6.2"
   },

diff --git a/src/sound_font_synth.js b/src/sound_font_synth.js
@@ -343,9 +343,7 @@ export default class Synthesizer {
       }
 
       // select bank
-      if (banks[bankNumber] === void 0) {
-        banks[bankNumber] = [];
-      }
+      banks[bankNumber] = banks[bankNumber] ?? [];
       bank = banks[bankNumber];
       bank[presetNumber] = {};
       bank[presetNumber].name = presetName;
@@ -798,7 +796,7 @@ export default class Synthesizer {
     const headerElem = doc.createElement('div');
     headerElem.className = 'header';
     for (const item in this.items) {
-      if (!{}.hasOwnProperty.call(this.items, item)) {
+      if (!Object.hasOwn(this.items, item)) {
         continue;
       }
       /** @type {HTMLDivElement} */
@@ -889,7 +887,7 @@ export default class Synthesizer {
       bankElement.removeChild(bankElement.firstChild);
 
     for (const bankNo in this.programSet) {
-      if (!{}.hasOwnProperty.call(this.programSet, bankNo)) {
+      if (!Object.hasOwn(this.programSet, bankNo)) {
         continue;
       }
       const option = document.createElement('option');
@@ -927,7 +925,7 @@ export default class Synthesizer {
       programElement.removeChild(programElement.firstChild);
 
     for (const programNo in this.programSet[bankIndex]) {
-      if (!{}.hasOwnProperty.call(this.programSet[bankIndex], programNo)) {
+      if (!Object.hasOwn(this.programSet[bankIndex], programNo)) {
         continue;
       }
       // TODO: 存在しないプログラムの場合、現状では空白になってしまう
@@ -1207,7 +1205,7 @@ export default class Synthesizer {
    */
   bankChange(channel, bank) {
     /** パーカッションバンク */
-    const percussionBank = this.mode === 'XG' ? 127 : 128;
+    const percussionBank = this.mode === 'XG' || this.mode === 'GM' ? 127 : 128;
     if (this.mode === 'GM') {
       // GMの場合バンクセレクトを無効化
       bank = 0;
@@ -1574,13 +1572,9 @@ export default class Synthesizer {
    * @param {boolean} sw パーカッションチャネルか通常かのスイッチ
    */
   setPercussionPart(channel, sw) {
-    if (this.mode === 'GS' || this.mode === 'GM2') {
-      // GM Level2 / Roland GS
-      this.channelBank[channel] = 128;
-    } else {
-      // YAMAHA XG
-      this.channelBank[channel] = 127;
-    }
+    this.channelBank[channel] =
+      this.mode === 'GS' || this.mode === 'GM2' ? 128 : 127;
+
     this.percussionPart[channel] = sw;
     this.updateBankSelect(channel);
   }

diff --git a/src/wml.js b/src/wml.js
@@ -64,6 +64,10 @@ export default class WebMidiLink {
    * @public
    */
   async setup(url) {
+    // DOMをクリア
+    while (this.placeholder.firstChild) {
+      this.placeholder.removeChild(this.placeholder.firstChild);
+    }
     if (url) {
       // URLが明示的に指定されていた場合
       this.url = url;

diff --git a/src/wml.scss b/src/wml.scss
@@ -1,35 +1,25 @@
-// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+// Configuration
 @import '~/bootstrap/scss/functions';
-
-// 2. Include any default variable overrides here
-
-// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
 @import '~/bootstrap/scss/variables';
 @import '~/bootstrap/scss/variables-dark';
-
-// 4. Include any default map overrides here
-
-// 5. Include remainder of required parts
 @import '~/bootstrap/scss/maps';
 @import '~/bootstrap/scss/mixins';
-@import '~/bootstrap/scss/root';
-
-// 6. Optionally include any other parts as needed
 @import '~/bootstrap/scss/utilities';
+
+// Layout & components
+@import '~/bootstrap/scss/root';
 @import '~/bootstrap/scss/reboot';
-// @import '~/bootstrap/scss/type';
-// @import '~/bootstrap/scss/images';
-@import '~/bootstrap/scss/containers';
-// @import '~/bootstrap/scss/grid';
-// @import '~/bootstrap/scss/helpers';
+
 @import '~/bootstrap/scss/alert';
 @import '~/bootstrap/scss/forms';
 @import '~/bootstrap/scss/progress';
 
-// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+// Helpers
+@import '~/bootstrap/scss/helpers';
+
+// Utilities
 @import '~/bootstrap/scss/utilities/api';
 
-// 8. Add additional custom code here
 :root {
   --channel-1-color: #ff1744;
   --channel-2-color: #f50057;

diff --git a/yarn.lock b/yarn.lock
@@ -351,7 +351,7 @@ __metadata:
     stylelint-config-recommended-scss: ^13.0.0
     stylelint-order: ^6.0.3
     stylelint-prettier: ^4.0.2
-    vite: ^4.4.10
+    vite: ^4.4.11
     vite-plugin-banner: ^0.7.1
     vite-plugin-checker: ^0.6.2
   languageName: unknown
@@ -5083,9 +5083,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^4.4.10":
-  version: 4.4.10
-  resolution: "vite@npm:4.4.10"
+"vite@npm:^4.4.11":
+  version: 4.4.11
+  resolution: "vite@npm:4.4.11"
   dependencies:
     esbuild: ^0.18.10
     fsevents: ~2.3.2
@@ -5119,7 +5119,7 @@ __metadata:
       optional: true
   bin:
     vite: bin/vite.js
-  checksum: b5ab3fff97644321a9efd425d54cd841d619abcc4d3167f2c098253f4ed5d92d532a5c72ea0dad2cde3239b5613558a33c62ee77bb7b0ebce608d8e6d4f8a13d
+  checksum: c22145c8385343a629cd546054b9da6eee60327540102bdfd1ad897fd2e78e0763ce6a18a9d84fdefde9da8fd2427d3bec9eb2697b47cf4068c7b4b52f7e3e6a
   languageName: node
   linkType: hard