diff --git a/src/components/Player.vue b/src/components/Player.vue
index ff92882..6e3eec4 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -71,19 +71,19 @@
           <button-icon
             v-show="!player.isPersonalFM"
             :title="$t('player.previous')"
-            @click.native="player.playPrevTrack"
+            @click.native="playPrevTrack"
             ><svg-icon icon-class="previous"
           /></button-icon>
           <button-icon
             v-show="player.isPersonalFM"
             title="不喜欢"
-            @click.native="player.moveToFMTrash"
+            @click.native="moveToFMTrash"
             ><svg-icon icon-class="thumbs-down"
           /></button-icon>
           <button-icon
             class="play"
             :title="$t(player.playing ? 'player.pause' : 'player.play')"
-            @click.native="player.playOrPause"
+            @click.native="playOrPause"
           >
             <svg-icon :icon-class="player.playing ? 'pause' : 'play'"
           /></button-icon>
@@ -115,7 +115,7 @@
                 ? $t('player.repeatTrack')
                 : $t('player.repeat')
             "
-            @click.native="player.switchRepeatMode"
+            @click.native="switchRepeatMode"
           >
             <svg-icon
               v-show="player.repeatMode !== 'one'"
@@ -129,18 +129,18 @@
           <button-icon
             :class="{ active: player.shuffle, disabled: player.isPersonalFM }"
             :title="$t('player.shuffle')"
-            @click.native="player.switchShuffle"
+            @click.native="switchShuffle"
             ><svg-icon icon-class="shuffle"
           /></button-icon>
           <button-icon
             v-if="settings.enableReversedMode"
             :class="{ active: player.reversed, disabled: player.isPersonalFM }"
             :title="$t('player.reversed')"
-            @click.native="player.switchReversed"
+            @click.native="switchReversed"
             ><svg-icon icon-class="sort-up"
           /></button-icon>
           <div class="volume-control">
-            <button-icon :title="$t('player.mute')" @click.native="player.mute">
+            <button-icon :title="$t('player.mute')" @click.native="mute">
               <svg-icon v-show="volume > 0.5" icon-class="volume" />
               <svg-icon v-show="volume === 0" icon-class="volume-mute" />
               <svg-icon
@@ -214,6 +214,12 @@ export default {
   methods: {
     ...mapMutations(['toggleLyrics']),
     ...mapActions(['showToast', 'likeATrack']),
+    playPrevTrack() {
+      this.player.playPrevTrack();
+    },
+    playOrPause() {
+      this.player.playOrPause();
+    },
     playNextTrack() {
       if (this.player.isPersonalFM) {
         this.player.playNextFMTrack();
@@ -246,6 +252,21 @@ export default {
     goToArtist(id) {
       this.$router.push({ path: '/artist/' + id });
     },
+    moveToFMTrash() {
+      this.player.moveToFMTrash();
+    },
+    switchRepeatMode() {
+      this.player.switchRepeatMode();
+    },
+    switchShuffle() {
+      this.player.switchShuffle();
+    },
+    switchReversed() {
+      this.player.switchReversed();
+    },
+    mute() {
+      this.player.mute();
+    },
   },
 };
 </script>
diff --git a/src/views/lyrics.vue b/src/views/lyrics.vue
index 8f1d32f..3673231 100644
--- a/src/views/lyrics.vue
+++ b/src/views/lyrics.vue
@@ -120,7 +120,7 @@
                     : $t('player.repeat')
                 "
                 :class="{ active: player.repeatMode !== 'off' }"
-                @click.native="player.switchRepeatMode"
+                @click.native="switchRepeatMode"
               >
                 <svg-icon
                   v-show="player.repeatMode !== 'one'"
@@ -135,21 +135,21 @@
                 <button-icon
                   v-show="!player.isPersonalFM"
                   :title="$t('player.previous')"
-                  @click.native="player.playPrevTrack"
+                  @click.native="playPrevTrack"
                 >
                   <svg-icon icon-class="previous" />
                 </button-icon>
                 <button-icon
                   v-show="player.isPersonalFM"
                   title="不喜欢"
-                  @click.native="player.moveToFMTrash"
+                  @click.native="moveToFMTrash"
                 >
                   <svg-icon icon-class="thumbs-down" />
                 </button-icon>
                 <button-icon
                   id="play"
                   :title="$t(player.playing ? 'player.pause' : 'player.play')"
-                  @click.native="player.playOrPause"
+                  @click.native="playOrPause"
                 >
                   <svg-icon :icon-class="player.playing ? 'pause' : 'play'" />
                 </button-icon>
@@ -164,7 +164,7 @@
                 v-show="!player.isPersonalFM"
                 :title="$t('player.shuffle')"
                 :class="{ active: player.shuffle }"
-                @click.native="player.switchShuffle"
+                @click.native="switchShuffle"
               >
                 <svg-icon icon-class="shuffle" />
               </button-icon>
@@ -332,6 +332,12 @@ export default {
   methods: {
     ...mapMutations(['toggleLyrics']),
     ...mapActions(['likeATrack']),
+    playPrevTrack() {
+      this.player.playPrevTrack();
+    },
+    playOrPause() {
+      this.player.playOrPause();
+    },
     playNextTrack() {
       if (this.player.isPersonalFM) {
         this.player.playNextFMTrack();
@@ -417,6 +423,12 @@ export default {
     moveToFMTrash() {
       this.player.moveToFMTrash();
     },
+    switchRepeatMode() {
+      this.player.switchRepeatMode();
+    },
+    switchShuffle() {
+      this.player.switchShuffle();
+    },
     getCoverColor() {
       if (this.settings.lyricsBackground !== true) return;
       const cover = this.currentTrack.al?.picUrl + '?param=1024y1024';