From 2302db45aef940e06ba03a30d7535b5c7c296f1e Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Fri, 29 Dec 2023 18:03:01 -0500 Subject: [PATCH] feat(showcase): added custom music --- config/_project_json.yaml | 11 +++++++++-- src/components/music.js | 34 +++++++++++++++++++++++++------- src/components/settings.js | 38 ++++++++++++++++++++++++++++++++++-- src/libs/wallpaper_engine.js | 10 +++++++++- 4 files changed, 81 insertions(+), 12 deletions(-) diff --git a/config/_project_json.yaml b/config/_project_json.yaml index 99de8d6..ef7f3c2 100644 --- 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:

📝 Notes

- ui_notice_changelog: New Background and Music Added! + ui_notice_changelog: Set your own music now! ui_notice_set_fps: Set FPS target in Settings 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:

📝 Music

ui_music_notice: Please adjust the 'Offset' value if you notice audio cutoff ui_music_notice1: 'bg_rhodes_day.png' and 'operator_bg.png' use the same music, it is not a bug. + 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:

📝 通知

- ui_notice_changelog: 已添加新背景和音乐! + ui_notice_changelog: 可设定自定义音乐! ui_notice_set_fps: 在设置中设定FPS目标 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: 如若发现音频截止，请调节 '弥补' 数值 ui_music_notice1: 'bg_rhodes_day.png' 和 'operator_bg.png' 使用同样的音乐，并非Bug 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 diff --git a/src/components/music.js b/src/components/music.js index 2cbd513..c645732 100644 --- 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,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() } } diff --git a/src/components/settings.js b/src/components/settings.js index 08bee58..9902373 100644 --- 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 = `
@@ -348,7 +373,7 @@ export default class Settings {
- +
@@ -382,7 +407,7 @@ export default class Settings {
- +
@@ -442,6 +467,11 @@ export default class Settings { ${this.#updateOptions("music_select", window.music.music)}
+
+ + + +
@@ -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"); diff --git a/src/libs/wallpaper_engine.js b/src/libs/wallpaper_engine.js index f6d9efe..c2e51e3 100644 --- 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()