Added play/pause icon functionality with simple button style

src/renderer/layouts/PlayerBar.vue

@@ -8,6 +8,12 @@
         <div class="visualizer">
             <div id="visualizer"></div>
         </div>
+        <div class="control-buttons">
+            <div class="play-pause-button" @click="togglePlay">
+                <svg v-show="!isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/></svg>
+                <svg v-show="isPlaying" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-2 28h-4V16h4v16zm8 0h-4V16h4v16z"/></svg>
+            </div>
+        </div>
     </section>
 </template>
 
@@ -29,9 +35,11 @@ export default {
       responsive: true
     })
     this.wavesurfer.load('/static/demo/music.mp3')
-    this.wavesurfer.on('ready', function () {
-      // wavesurfer.play()
-    })
+  },
+  data () {
+    return {
+      isPlaying: false
+    }
   },
   methods: {
     onArtworkLoad () {
@@ -39,6 +47,14 @@ export default {
       color(img.src, (_, color) => {
         this.wavesurfer.setProgressColor(`#${color}`)
       })
+    },
+    togglePlay () {
+      if (this.isPlaying) {
+        this.wavesurfer.pause()
+      } else {
+        this.wavesurfer.play()
+      }
+      this.isPlaying = typeof this.wavesurfer === 'undefined' ? false : this.wavesurfer.isPlaying()
     }
   }
 }