feat(showcase): added custom music

2023-12-29 18:03:01 -05:00
parent 2149130e35
commit 2302db45ae
4 changed files with 81 additions and 12 deletions
--- a/config/_project_json.yaml
+++ b/config/_project_json.yaml
@@ -2,7 +2,7 @@ description: !match "~{split('config', 'title' ,' - ')[0]} Live 2D\n~{split('con
 localization:
  en-us:
    ui_notice_title: <hr><h4>📝 Notes</h4><hr>
-    ui_notice_changelog: <span><b>New Background and Music Added!</b></span>
+    ui_notice_changelog: <span><b>Set your own music now!</b></span>
    ui_notice_set_fps: <span><b>Set FPS target in Settings</b></span>
    ui_notice_github: "Github: https://gura.ch/aklive2d-gh"
    ui_notice_other_operators: "Previews: https://gura.ch/aklive2d"
@@ -34,13 +34,14 @@ localization:
    ui_music_title: <hr><h4>📝 Music</h4><hr>
    ui_music_notice: <span><b>Please adjust the 'Offset' value if you notice audio cutoff</b></span>
    ui_music_notice1: <span><b>'bg_rhodes_day.png' and 'operator_bg.png' use the same music, it is not a bug.</b></span>
+    ui_custom_music: Custom Music
    ui_music_selection: Music
    ui_music_volume: Volume
    ui_music_offset: Offset
    ui_useStartAnimation_title: Use Start Animation
  zh-chs:
    ui_notice_title: <hr><h4>📝 通知</h4><hr>
-    ui_notice_changelog: <span><b>已添加新背景和音乐! </b></span>
+    ui_notice_changelog: <span><b>可设定自定义音乐! </b></span>
    ui_notice_set_fps: <span><b>在设置中设定FPS目标</b></span>
    ui_notice_github: "Github: https://gura.ch/aklive2d-gh"
    ui_notice_other_operators: "预览: https://gura.ch/aklive2d"
@@ -73,6 +74,7 @@ localization:
    ui_music_notice: <span><b>如若发现音频截止，请调节 '弥补' 数值</b></span>
    ui_music_notice1: <span><b>'bg_rhodes_day.png' 和 'operator_bg.png' 使用同样的音乐，并非Bug</b></span>
    ui_music_selection: 音乐
+    ui_custom_music: 自定义音乐
    ui_music_volume: 音量
    ui_music_offset: 弥补
    ui_useStartAnimation_title: 使用开始动画
@@ -243,6 +245,11 @@ properties:
     type: combo
     value: !match ~{var('assets', "music")[0]}
     options: !match ~{var('assets', "musicOptions")}
+  - key: custom_music
+    value: 
+     text: ui_custom_music
+     type: file
+     value: ""
  - key: music_volume
    value: 
     text: ui_music_volume
--- a/src/components/music.js
+++ b/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,16 +91,35 @@ 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() {
+    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()
+    }
  }

  #stopMusic() {
--- a/src/components/settings.js
+++ b/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");
--- a/src/libs/wallpaper_engine.js
+++ b/src/libs/wallpaper_engine.js
@@ -49,7 +49,7 @@ window.wallpaperPropertyListener = {
        }
        if (properties.background) {
            if (properties.background.value) {
-                window.settings.setBackgoundImage(`url('file:///${properties.background.value}`)
+                window.settings.setBackgoundImage(`url('file:///${properties.background.value}')`)
                window.settings.functionInsights("setBackgoundImage", Object.keys(properties) !== 1)
            } else {
                window.settings.resetBackground()
@@ -103,6 +103,14 @@ window.wallpaperPropertyListener = {
            window.music.volume = properties.music_volume.value
            window.settings.functionInsights("music_volume", Object.keys(properties) !== 1)
        }
+        if (properties.custom_music) {
+            if (properties.custom_music.value) {
+                window.settings.setMusicFromWE(`file:///${properties.custom_music.value}`)
+                window.settings.functionInsights("setMusic", Object.keys(properties) !== 1)
+            } else {
+                window.settings.resetMusic()
+            }
+        }
        if (properties.position) {
            if (!properties.position.value) {
                window.settings.positionReset()