diff --git a/client/src/components/player.vue b/client/src/components/player.vue
index 25d48ca..3c67b0c 100644
--- a/client/src/components/player.vue
+++ b/client/src/components/player.vue
@@ -55,14 +55,7 @@
           />
           <q-skeleton v-if="loaderPlay" class="player__tools m--skeleton" />
           <div v-else class="player__volume">
-            <span
-              @click="toggleVolume"
-              :class="
-                this.songVolume === 0
-                  ? 'player__volume-off'
-                  : 'player__volume-on'
-              "
-            />
+            <span ref="volumeIcon" @click="toggleVolume" :class="volumeClass" />
             <input
               type="range"
               min="0"
@@ -136,6 +129,9 @@ export default {
     loaderPlay() {
       return this.$store.state.currentPlay.isLoader;
     },
+    volumeClass() {
+      return this.songVolume == 0 ? 'player__volume-off' : 'player__volume-on';
+    },
   },
   watch: {
     currentPlay: {