feat(showcase): added custom music

src/components/music.js

@@ -10,6 +10,7 @@ export default class Music {
   #useMusic = false
   #timeOffset = 0.3
   #volume = 0.5
+  #isUsingCustomMusic = false
 
   constructor(el) {
     this.#el = el
@@ -80,7 +81,7 @@ export default class Music {
   }
 
   changeMusic(name) {
-    if (name !== this.#currentMusic) {
+    if (name !== this.#currentMusic && !this.#isUsingCustomMusic) {
       this.#currentMusic = name
       if (this.#useMusic) {
         this.#audioLoopEl.pause()
@@ -90,14 +91,33 @@ export default class Music {
     }
   }
 
+  setMusic(data, type) {
+    this.#audioLoopEl.src = data
+    this.#audioLoopEl.querySelector('source').type = `audio/${type}`
+    this.#isUsingCustomMusic = true
+    this.#playMusic()
+  }
+
+  resetMusic() {
+    this.#isUsingCustomMusic = false
+    this.#playMusic()
+  }
+
   #playMusic() {
-    const introOgg = this.#mapping[this.#currentMusic].intro
-    const intro = `./assets/${this.#folder}/${introOgg}`
-    const loop = `./assets/${this.#folder}/${this.#mapping[this.#currentMusic].loop}`
-    this.#audioLoopEl.src = loop
-    if (introOgg) {
-      this.#audioIntroEl.src = intro || loop
+    if (!this.#isUsingCustomMusic) {
+      const introOgg = this.#mapping[this.#currentMusic].intro
+      const intro = `./assets/${this.#folder}/${introOgg}`
+      const loop = `./assets/${this.#folder}/${this.#mapping[this.#currentMusic].loop}`
+      this.#audioLoopEl.src = loop
+      this.#audioLoopEl.querySelector('source').type = 'audio/ogg'
+      if (introOgg) {
+        this.#audioIntroEl.src = intro || loop
+        this.#audioIntroEl.querySelector('source').type = 'audio/ogg'
+      } else {
+        this.#audioLoopEl.play()
+      }
     } else {
+      this.#audioIntroEl.pause()
       this.#audioLoopEl.play()
     }
   }

src/components/settings.js

@@ -327,6 +327,7 @@ export default class Settings {
     this.resetLogoImage()
     this.logoReset()
     this.resetBackground()
+    this.resetMusic()
     this.setLogoDisplay(this.#defaulthideLogo)
     this.setFPS(this.#defaultFps)
     document.getElementById("fps_slider").value = this.#defaultFps
@@ -334,6 +335,30 @@ export default class Settings {
     this.spinePlayer.play()
   }
 
+  setMusicFromWE(url) {
+    const type = url.split(".").pop()
+    window.music.setMusic(url, type)
+    document.getElementById("custom_music_clear").disabled = false
+  }
+
+  setMusic(e) {
+    this.#readFile(
+      e,
+      (readerEvent) => {
+        const content = readerEvent.target.result;
+        const type = content.split(";")[0].split(":")[1]
+        window.music.setMusic(content, type)
+      },
+      () => document.getElementById("custom_music_clear").disabled = false
+    )
+  }
+
+  resetMusic() {
+    document.getElementById("custom_music").value = ""
+    document.getElementById("custom_music_clear").disabled = true
+    window.music.resetMusic()
+  }
+
   #insertHTML() {
     this.#el.innerHTML = `
       <div>
@@ -348,7 +373,7 @@ export default class Settings {
           <div id="operator_logo_realted">
             <div>
               <label for="logo_image">Logo Image (Store Locally)</label>
-              <input type="file" id="logo_image" />
+              <input type="file" id="logo_image" accept="image/*"/>
               <button type="button" id="logo_image_clear" disabled>Clear</button>
             </div>
             <div>
@@ -382,7 +407,7 @@ export default class Settings {
           </div>
           <div>
             <label for="custom_background"> Custom Background (Store Locally)</label>
-            <input type="file" id="custom_background"/>
+            <input type="file" id="custom_background" accept="image/*"/>
             <button type="button" disabled id="custom_background_clear" disabled>Clear</button>
           </div>
         </div>
@@ -442,6 +467,11 @@ export default class Settings {
                 ${this.#updateOptions("music_select", window.music.music)}
               </select>
             </div>
+            <div>
+              <label for="custom_music"> Custom Music (Store Locally)</label>
+              <input type="file" id="custom_music" accept="audio/*"/>
+              <button type="button" disabled id="custom_music_clear" disabled>Clear</button>
+            </div>
             <div>
               <label for="music_volume">Music Volume</label>
               <input type="range" min="0" max="100" step="1" id="music_volume_slider" value="${window.music.volume}" />
@@ -661,6 +691,10 @@ export default class Settings {
         }
       }, {
         id: "music_select", event: "change", handler: e => window.music.changeMusic(e.currentTarget.value)
+      }, {
+        id: "custom_music", event: "change", handler: e => _this.setMusic(e)
+      }, {
+        id: "custom_music_clear", event: "click", handler: () => _this.resetMusic()
       }, {
         id: "music_volume_slider", event: "input", handler: e => {
           _this.#sync(e.currentTarget, "music_volume_input");