feat: 开关音乐

public/libs/control.js

@@ -3363,11 +3363,11 @@ control.prototype.resumeBgm = function (resumeTime) {
 ////// 更改背景音乐的播放 //////
 control.prototype.triggerBgm = function () {
     if (main.mode !== 'play') return;
+    const bgm = Mota.require('var', 'bgm');
+    bgm.disable = !bgm.disable;
 
-    core.musicStatus.bgmStatus = !core.musicStatus.bgmStatus;
-    if (core.musicStatus.bgmStatus) this.resumeBgm();
+    if (!bgm.disable) this.resumeBgm();
     else this.pauseBgm();
-    core.setLocalStorage('bgmStatus', core.musicStatus.bgmStatus);
 };
 
 // todo: deprecate playSound, stopSound, getPlayingSounds
@@ -3397,7 +3397,10 @@ control.prototype.getPlayingSounds = function (name) {
 
 ////// 检查bgm状态 //////
 control.prototype.checkBgm = function () {
-    core.playBgm(core.musicStatus.playingBgm || main.startBgm);
+    const bgm = Mota.require('var', 'bgm');
+    if (!bgm.playing) {
+        bgm.changeTo(bgm.now ?? main.startBgm);
+    }
 };
 
 ///// 设置屏幕放缩 //////

src/core/audio/bgm.ts

@@ -8,6 +8,7 @@ interface AnimatingBgm {
     ani: Transition;
     timeout: number;
     currentTime: number;
+    endVolume: number;
 }
 
 export class BgmController
@@ -28,6 +29,11 @@ export class BgmController
 
     /** 音量 */
     volume: number = 1;
+    /** 是否关闭了bgm */
+    disable: boolean = false;
+
+    /** 是否正在播放bgm */
+    playing: boolean = false;
 
     private transitionData: Map<BgmIds, AnimatingBgm> = new Map();
 
@@ -61,6 +67,7 @@ export class BgmController
      * @param when 切换至的歌从什么时候开始播放，默认-1，表示不改变，整数表示设置为目标值
      */
     changeTo(id: BgmIds, when: number = -1, noStack: boolean = false) {
+        if (id === this.now) return;
         let prevent = false;
         const preventDefault = () => {
             prevent = true;
@@ -71,8 +78,11 @@ export class BgmController
 
         if (prevent) return;
 
+        this.playing = true;
+        if (!this.disable) {
             this.setTransitionAnimate(id, 1);
             if (this.now) this.setTransitionAnimate(this.now, 0, when);
+        }
 
         if (!noStack) {
             if (this.now) this.stack.push(this.now);
@@ -97,6 +107,8 @@ export class BgmController
 
         if (prevent) return;
 
+        this.playing = false;
+
         if (transition) this.setTransitionAnimate(this.now, 0);
         else this.get(this.now).pause();
     }
@@ -113,20 +125,37 @@ export class BgmController
         };
         const ev = { preventDefault };
 
-        this.emit('pause', ev, this.now);
+        this.emit('resume', ev, this.now);
 
         if (prevent) return;
 
+        this.playing = true;
+
+        if (!this.disable) {
             if (transition) this.setTransitionAnimate(this.now, 1);
             else this.get(this.now).play();
         }
+    }
 
     /**
-     * 播放bgm，不进行渐变操作，效果为没有渐变的切歌
+     * 播放bgm，不进行渐变操作，效果为没有渐变的切歌，也会触发changeBgm事件，可以被preventDefault
      * @param id 要播放的bgm
      * @param when 从bgm的何时开始播放
      */
     play(id: BgmIds, when: number = 0, noStack: boolean = false) {
+        if (id === this.now) return;
+        let prevent = false;
+        const preventDefault = () => {
+            prevent = true;
+        };
+        const ev = { preventDefault };
+
+        this.emit('changeBgm', ev, id, this.now);
+
+        if (prevent) return;
+
+        this.playing = true;
+
         const before = this.now ? null : this.get(this.now!);
         const to = this.get(id);
         if (before) {
@@ -135,12 +164,15 @@ export class BgmController
         to.currentTime = when;
         to.volume = this.volume;
         to.play();
+
+        if (!this.disable) {
             if (!noStack) {
                 if (this.now) this.stack.push(this.now);
                 this.redoStack = [];
             }
             this.now = id;
         }
+    }
 
     /**
      * 撤销当前播放，改为播放前一个bgm
@@ -201,7 +233,7 @@ export class BgmController
             ani.value.volume = bgm.paused ? 0 : 1;
             const end = () => {
                 ani.ticker.destroy();
-                if (ani.value.volume === 0) {
+                if (tran!.endVolume === 0) {
                     bgm.pause();
                 } else {
                     bgm.volume = ani.value.volume * this.volume;
@@ -212,7 +244,8 @@ export class BgmController
                 end,
                 ani: ani,
                 timeout: -1,
-                currentTime: bgm.currentTime
+                currentTime: bgm.currentTime,
+                endVolume: to
             };
             this.transitionData.set(id, tran);
             ani.ticker.add(() => {
@@ -227,6 +260,7 @@ export class BgmController
         if (when !== -1) {
             bgm.currentTime = when;
         }
+        tran.endVolume = to;
 
         tran.ani
             .time(this.transitionTime)

src/core/main/setting.ts

@@ -3,6 +3,7 @@ import { EmitableEvent, EventEmitter } from '../common/eventEmitter';
 import { GameStorage } from './storage';
 import { has, triggerFullscreen } from '@/plugin/utils';
 import { createSettingComponents } from './init/settings';
+import { bgm } from '../audio/bgm';
 
 export interface SettingComponentProps {
     item: MotaSettingItem;
@@ -306,25 +307,7 @@ export const mainSetting = new MotaSetting();
 // 添加不参与全局存储的设置
 MotaSetting.noStorage.push('action.autoSkill', 'screen.fullscreen');
 
-export interface SettingStorage {
-    showHalo: boolean;
-    frag: boolean;
-    itemDetail: boolean;
-    transition: boolean;
-    antiAlias: boolean;
-    fontSize: number;
-    smoothView: boolean;
-    criticalGem: boolean;
-    fixed: boolean;
-    betterLoad: boolean;
-    autoScale: boolean;
-    paraLight: boolean;
-    heroDetail: boolean;
-}
-
-const storage = new GameStorage<SettingStorage>(
-    GameStorage.fromAuthor('AncTe', 'setting')
-);
+const storage = new GameStorage(GameStorage.fromAuthor('AncTe', 'setting'));
 
 export { storage as settingStorage };
 
@@ -340,8 +323,8 @@ mainSetting.on('valueChange', (key, n, o) => {
         handleScreenSetting(setting, n, o);
     } else if (root === 'action') {
         handleActionSetting(setting, n, o);
-    } else if (root === 'utils') {
-        handleUtilsSetting(setting, n, o);
+    } else if (root === 'audio') {
+        handleAudioSetting(setting, n, o);
     }
 });
 
@@ -385,11 +368,18 @@ function handleActionSetting<T extends number | boolean>(
     }
 }
 
-function handleUtilsSetting<T extends number | boolean>(
+function handleAudioSetting<T extends number | boolean>(
     key: string,
     n: T,
     o: T
-) {}
+) {
+    if (key === 'bgmEnabled') {
+        bgm.disable = !n;
+        core.checkBgm();
+    } else if (key === 'bgmVolume') {
+        bgm.volume = (n as number) / 100;
+    }
+}
 
 // ----- 游戏的所有设置项
 // todo: 虚拟键盘缩放，小地图楼传缩放
@@ -421,6 +411,13 @@ mainSetting
             .register('toolbar', '自定义工具栏', false, COM.ToolbarEditor)
             .setDisplayFunc('toolbar', () => '')
     )
+    .register(
+        'audio',
+        '音频设置',
+        new MotaSetting()
+            .register('bgmEnabled', '开启音乐', true, COM.Boolean)
+            .register('bgmVolume', '音乐音量', 80, COM.Number, [0, 100, 5])
+    )
     .register(
         'utils',
         '系统设置',
@@ -460,6 +457,8 @@ loading.once('coreInit', () => {
         'screen.smoothView': !!storage.getValue('screen.smoothView', true),
         'screen.criticalGem': !!storage.getValue('screen.criticalGem', false),
         'action.fixed': !!storage.getValue('action.fixed', true),
+        'audio.bgmEnabled': !!storage.getValue('sound.bgmEnabled', true),
+        'audio.bgmVolume': storage.getValue('sound.bgmVolume', 80),
         'utils.betterLoad': !!storage.getValue('utils.betterLoad', true),
         'utils.autoScale': !!storage.getValue('utils.autoScale', true),
         'fx.paraLight': !!storage.getValue('fx.paraLight', true),

src/ui/start.vue

@@ -66,13 +66,14 @@ import {
 import { sleep } from 'mutate-animate';
 import { Matrix4 } from '../plugin/webgl/matrix';
 import { doByInterval, keycode } from '../plugin/utils';
-import { KeyCode } from '../plugin/keyCodes';
 import { triggerFullscreen } from '../plugin/utils';
 import { isMobile } from '../plugin/use';
 import { GameUi } from '@/core/main/custom/ui';
 import { gameKey } from '@/core/main/init/hotkey';
 import { mainUi } from '@/core/main/init/ui';
 import { CustomToolbar } from '@/core/main/custom/toolbar';
+import { mainSetting } from '@/core/main/setting';
+import { bgm as mainBgm } from '@/core/audio/bgm';
 
 const props = defineProps<{
     num: number;
@@ -141,7 +142,6 @@ function setCursor(ele: HTMLSpanElement, i: number) {
 }
 
 async function clickStartButton(id: string) {
-    core.checkBgm();
     if (id === 'start-game') showHard();
     if (id === 'back') setButtonAnimate();
     if (id === 'easy' || id === 'hard-hard') {
@@ -314,7 +314,8 @@ onMounted(async () => {
         window.addEventListener('resize', resize);
         resize();
 
-        soundChecked.value = core.musicStatus.bgmStatus;
+        soundChecked.value = mainSetting.getValue('audio.bgmEnabled', true);
+        mainBgm.changeTo('title.mp3');
 
         start.style.opacity = '1';
         if (played) {