From 126ef601dcb1a8600eed426699bfe5c5dc852d9b Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Fri, 2 May 2025 22:01:08 +0800
Subject: [PATCH] feat: added voice volume

---
 apps/showcase/src/components/voice.js         | 40 +++++++++++++++++++
 .../src/components/wallpaper_engine.js        |  9 +++++
 packages/project-json/project_json.yaml       | 11 +++++
 turbo.json                                    |  2 +
 4 files changed, 62 insertions(+)

diff --git a/apps/showcase/src/components/voice.js b/apps/showcase/src/components/voice.js
index 9296167..f433775 100644
--- a/apps/showcase/src/components/voice.js
+++ b/apps/showcase/src/components/voice.js
@@ -54,6 +54,7 @@ export default class Voice {
             ...this.#default.subtitle,
         },
         duration: { ...this.#default.duration },
+        volume: 100,
     }
     #playerObj
 
@@ -90,6 +91,7 @@ export default class Voice {
         this.#voice.languages = Object.keys(
             this.#charwordTable.voiceLangs[this.#default.region]
         )
+        this.#audio.el.volume = this.#volume
         this.#default.language.voice = this.#voice.languages[0]
         this.#config.language = this.#default.language.voice
         this.#voice.locations = this.#getVoiceLocations()
@@ -415,6 +417,20 @@ export default class Voice {
         return this.duration.next
     }
 
+    get volume() {
+        return this.#config.volume
+    }
+
+    get #volume() {
+        return this.#config.volume / 100
+    }
+
+    set volume(value) {
+        value = value < 0 ? 0 : value > 100 ? 100 : parseInt(value)
+        this.#config.volume = value
+        this.#audio.el.volume = this.#volume
+    }
+
     set subtitleX(x) {
         // Note: Back Compatibility
         this.position = {
@@ -477,6 +493,11 @@ export default class Voice {
             ${updateHTMLOptions(this.languages)}
           </select>
         </div>
+        <div>
+          <label for="voice-volume">Voice Volume</label>
+          <input type="range" min="0" max="100" step="1" id="voice-volume-slider" value="${this.volume}" />
+          <input type="number" id="voice-volume-input"  min="0" max="100" step="1" name="voice-volume" value="${this.volume}" />
+        </div>
         <div>
           <label for="voice-idle-duration">Idle Duration (min)</label>
           <input type="number" id="voice-idle-duration-input" min="0" name="voice-idle-duration" value="${this.duration.idle}" />
@@ -533,6 +554,22 @@ export default class Voice {
                     this.language = e.currentTarget.value
                 },
             },
+            {
+                id: 'voice-volume-slider',
+                event: 'input',
+                handler: (e) => {
+                    syncHTMLValue(e.currentTarget, 'voice-volume-input')
+                    this.volume = e.currentTarget.value
+                },
+            },
+            {
+                id: 'voice-volume-input',
+                event: 'change',
+                handler: (e) => {
+                    syncHTMLValue(e.currentTarget, 'voice-volume-slider')
+                    this.volume = e.currentTarget.value
+                },
+            },
             {
                 id: 'voice-idle-duration-input',
                 event: 'change',
@@ -637,6 +674,9 @@ export default class Voice {
             case 'use-voice-actor':
                 this.useVoiceActor = value
                 break
+            case 'volume':
+                this.volume = value
+                break
             default:
                 return
         }
diff --git a/apps/showcase/src/components/wallpaper_engine.js b/apps/showcase/src/components/wallpaper_engine.js
index f74b079..385bd92 100644
--- a/apps/showcase/src/components/wallpaper_engine.js
+++ b/apps/showcase/src/components/wallpaper_engine.js
@@ -141,6 +141,15 @@ window.wallpaperPropertyListener = {
                 })
             )
         }
+        if (properties.voice_volume) {
+            document.dispatchEvent(
+                Events.RegisterConfig.handler({
+                    target: 'voice',
+                    key: 'volume',
+                    value: properties.voice_volume.value,
+                })
+            )
+        }
         if (properties.voiceidle) {
             document.dispatchEvent(
                 Events.RegisterConfig.handler({
diff --git a/packages/project-json/project_json.yaml b/packages/project-json/project_json.yaml
index e735331..8b4faaf 100644
--- a/packages/project-json/project_json.yaml
+++ b/packages/project-json/project_json.yaml
@@ -43,6 +43,7 @@ localization:
         ui_custom_video: Custom Video
         ui_video_volume: Volume
         ui_misc_title: <hr><h4>💡 Misc</h4><hr>
+        ui_voice_volume: Volume
     zh-chs:
         ui_notice_title: <hr><h4>📝 通知</h4><hr>
         ui_notice_set_fps: <span><b>在设置中设定FPS目标</b></span>
@@ -86,6 +87,7 @@ localization:
         ui_custom_video: 自定义视频
         ui_video_volume: 音量
         ui_misc_title: <hr><h4>💡 杂项</h4><hr>
+        ui_voice_volume: 音量
 properties:
     - key: notice_title
       value:
@@ -177,6 +179,15 @@ properties:
           condition: voicetitle.value == true
           value: !match ~{var('assets', "voiceLangs")[0]}
           options: !match ~{var('assets', "voiceLangsOptions")}
+    - key: voice_volume
+      value:
+          text: ui_voice_volume
+          type: slider
+          value: 100
+          condition: voicetitle.value == true
+          fraction: false
+          max: 100
+          min: 0
     - key: voiceidle
       value:
           text: ui_voice_idle
diff --git a/turbo.json b/turbo.json
index 65cc90a..5f41031 100644
--- a/turbo.json
+++ b/turbo.json
@@ -137,6 +137,8 @@
             "persistent": true
         },
         "dev:showcase": {
+            "env": ["name"],
+            "dependsOn": ["^@aklive2d/assets#build"],
             "cache": false,
             "persistent": true
         },