diff --git a/web-src/src/components/PlayerButtonPlayPause.vue b/web-src/src/components/PlayerButtonPlayPause.vue
index 32ad3ac7..7b6ecb3a 100644
--- a/web-src/src/components/PlayerButtonPlayPause.vue
+++ b/web-src/src/components/PlayerButtonPlayPause.vue
@@ -1,6 +1,6 @@
 <template>
   <a v-on:click="toggle_play_pause">
-    <span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing }]"></i></span>
+    <span class="icon"><i class="mdi" v-bind:class="[icon_style, { 'mdi-play': !is_playing, 'mdi-pause': is_playing && is_pause_allowed, 'mdi-stop': is_playing && !is_pause_allowed }]"></i></span>
   </a>
 </template>
 
@@ -15,13 +15,19 @@ export default {
   computed: {
     is_playing () {
       return this.$store.state.player.state === 'play'
+    },
+
+    is_pause_allowed () {
+      return this.$store.getters.now_playing && this.$store.getters.now_playing.data_kind !== 'url' && this.$store.getters.now_playing.data_kind !== 'pipe'
     }
   },
 
   methods: {
     toggle_play_pause: function () {
-      if (this.is_playing) {
+      if (this.is_playing && this.is_pause_allowed) {
         webapi.player_pause()
+      } else if (this.is_playing && !this.is_pause_allowed) {
+        webapi.player_stop()
       } else {
         webapi.player_play()
       }
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index fe387e9e..a733392a 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -91,6 +91,10 @@ export default {
     return axios.put('/api/player/pause')
   },
 
+  player_stop () {
+    return axios.put('/api/player/stop')
+  },
+
   player_next () {
     return axios.put('/api/player/next')
   },