feat(utils/player): 播放、暫停時淡入淡出

src/utils/Player.js

@@ -11,6 +11,8 @@ import { isAccountLoggedIn } from '@/utils/auth';
 import { trackUpdateNowPlaying, trackScrobble } from '@/api/lastfm';
 import { isCreateMpris, isCreateTray } from '@/utils/platform';
 
+const PLAY_PAUSE_FADE_DURATION = 200;
+
 const electron =
   process.env.IS_ELECTRON === true ? window.require('electron') : null;
 const ipcRenderer =
@@ -649,14 +651,23 @@ export default class {
   }
 
   pause() {
+    this._howler?.fade(this.volume, 0, PLAY_PAUSE_FADE_DURATION);
+
+    this._howler?.once('fade', () => {
       this._howler?.pause();
       this._setPlaying(false);
       setTitle(null);
       this._pauseDiscordPresence(this._currentTrack);
+    });
   }
   play() {
     if (this._howler?.playing()) return;
+
     this._howler?.play();
+
+    this._howler?.once('play', () => {
+      this._howler?.fade(0, this.volume, PLAY_PAUSE_FADE_DURATION);
+
       this._setPlaying(true);
       if (this._currentTrack.name) {
         setTitle(this._currentTrack);
@@ -671,6 +682,7 @@ export default class {
           duration: ~~(this.currentTrack.dt / 1000),
         });
       }
+    });
   }
   playOrPause() {
     if (this._howler?.playing()) {