ローダーのバグ修正。

SoundFontの上書きがうまくいかないバグ修正。
logue · Oct 15, 2023 · 85a1dd6 · 85a1dd6
1 parent a8d21ff
commit 85a1dd6
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 74 deletions.
diff --git a/index.html b/index.html
@@ -116,10 +116,10 @@ <h1 class="h2">
       import SoundFont from '/src/index';
 
       /** sf2synth.js Option */
-      const options = {
+      let options = {
         ...{
           // URL to SoundFont File
-          // url: 'Yamaha XG Sound Set.sf2',
+          // url: 'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/Yamaha XG Sound Set.sf2',
           // Show Keyboard
           drawSynth: true,
           // Target dom id
@@ -128,8 +128,12 @@ <h1 class="h2">
           colorMode: 'auto',
         },
         ...qs.parse(window.location.search),
+        ...qs.parse(window.location.hash),
       };
 
+      /** @type {typeof import("./src/wml").WebMidiLink } WebMidiLink */
+      const wml = new SoundFont.WebMidiLink(options);
+
       document.addEventListener(
         'DOMContentLoaded',
         event => {
@@ -144,19 +148,17 @@ <h1 class="h2">
           /** @type {HTMLSelectElement} */
           // const selector = document.getElementById('selector');
 
-          // Apply build time
-          build.dateTime = SoundFont.build;
-          build.innerText = new Date(SoundFont.build).toLocaleString();
-
-          /** @type {typeof import("./src/wml").WebMidiLink } WebMidiLink */
-          const wml = new SoundFont.WebMidiLink(options);
-
           wml.setLoadCallback(() => {
             dragArea.classList.remove('bg-info');
             document.getElementById('soundfont').innerText = decodeURIComponent(
               wml.getUrl()
             ).match('.+/(.+?)([?#;].*)?$')[1];
           });
+
+          // Apply build time
+          build.dateTime = SoundFont.build;
+          build.innerText = new Date(SoundFont.build).toLocaleString();
+
           wml.setup();
 
           // Keep an eye out for System Light/Dark Mode Changes
@@ -250,6 +252,17 @@ <h1 class="h2">
         },
         false
       );
+
+      window.addEventListener(
+        'hashchange',
+        () => {
+          const url = qs.parse(window.location.hash);
+          if (url) {
+            wml.setup(url);
+          }
+        },
+        false
+      );
     </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -84,20 +84,20 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@types/node": "^20.8.2",
+    "@types/node": "^20.8.6",
     "@types/webmidi": "^2.0.8",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
+    "lint-staged": "^15.0.1",
     "prettier": "^3.0.3",
     "query-string": "^8.1.0",
     "rimraf": "^5.0.5",
-    "sass": "1.69.0",
+    "sass": "1.69.3",
     "stylelint": "^15.10.3",
     "stylelint-config-recommended-scss": "^13.0.0",
     "stylelint-order": "^6.0.3",

diff --git a/src/loader.js b/src/loader.js
@@ -83,15 +83,12 @@ export default class Loader {
    * @private
    */
   onError(error = undefined) {
-    requestAnimationFrame(function () {
+    requestAnimationFrame(() => {
       this.alert.className = 'alert alert-danger';
       this.message.innerText =
         'An error occurred while loading SoundFont. See the console log for details. In addition, it may be cured by deleting the cache of the browser.';
       this.progressOuter.style.display = 'none';
     });
-    if (error) {
-      throw Error(error.message);
-    }
   }
 
   /**

diff --git a/src/wml.js b/src/wml.js
@@ -37,6 +37,7 @@ export default class WebMidiLink {
     this.option.colorMode = option.colorMode ?? 'auto';
     /** @type {string} SoundFont URL */
     this.url =
+      option.url ??
       'https://cdn.jsdelivr.net/npm/@logue/sf2synth@latest/dist/Yamaha XG Sound Set.sf2';
 
     /** @type {HTMLDivElement} */
@@ -63,7 +64,7 @@ export default class WebMidiLink {
    * @param {string?} url SoundFont URL
    * @public
    */
-  async setup(url) {
+  async setup(url = undefined) {
     // DOMをクリア
     while (this.placeholder.firstChild) {
       this.placeholder.removeChild(this.placeholder.firstChild);
@@ -78,7 +79,7 @@ export default class WebMidiLink {
       this.url,
       this.placeholder,
       this.option.cache,
-      buffer => this.setupByBuffer(buffer)
+      (/** @type {ArrayBuffer} */ buffer) => this.setupByBuffer(buffer)
     );
     await loader.fetch();
   }