diff --git a/package-lock.json b/package-lock.json
index 3992f6b..3740597 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16712,15 +16712,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
       "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
     },
-    "vue-audio-visual": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/vue-audio-visual/-/vue-audio-visual-1.3.0.tgz",
-      "integrity": "sha512-px0wYa0zQzi+lPuQ4NFRtDUOgcAK3OkV5fqpIkRKED8GM+NTJBu/AiyWwGfW2VzvwevKpwwgsKUF5CIntHJAVg==",
-      "requires": {
-        "axios": "^0.18.0",
-        "vue": "^2.5.17"
-      }
-    },
     "vue-carousel": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/vue-carousel/-/vue-carousel-0.18.0.tgz",
@@ -16995,6 +16986,11 @@
         "neo-async": "^2.5.0"
       }
     },
+    "wavesurfer.js": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/wavesurfer.js/-/wavesurfer.js-3.0.0.tgz",
+      "integrity": "sha512-DANu206c6gb9pSUbYFevsSiXMy8+Ri+CNtqm0UsouUdsn9fVQRtYs8uxzBtXK+rUPlIc6FlO54DU8uWeW3lDzw=="
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
diff --git a/package.json b/package.json
index 113e82e..aa9381b 100644
--- a/package.json
+++ b/package.json
@@ -61,13 +61,13 @@
     "normalize-scss": "^7.0.1",
     "roboto-slab-fontface-kit": "^1.0.2",
     "vue": "^2.5.16",
-    "vue-audio-visual": "^1.3.0",
     "vue-carousel": "^0.18.0",
     "vue-custom-scrollbar": "^1.1.0",
     "vue-electron": "^1.0.6",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
-    "vuex-electron": "^1.0.0"
+    "vuex-electron": "^1.0.0",
+    "wavesurfer.js": "^3.0.0"
   },
   "devDependencies": {
     "ajv": "^6.5.0",
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
index 67b32d2..8358a58 100644
--- a/src/renderer/layouts/PlayerBar.vue
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -1,10 +1,17 @@
 <template>
     <section>
-        <img class="artwork" src="/static/demo/artwork-4.png" />
+        <img class="artwork" src="/static/demo/artwork.jpg" />
         <div>
             <p class="title">Perfidia</p>
             <p class="artist">Nat King Cole</p>
         </div>
+        <div class="bars">
+            <audio ref="visualizer" autoplay src="/static/demo/music.mp3"></audio>
+                <av-waveform
+      ref-link="visualizer"
+      :playtime-line-width="0" :canv-width="800" :canv-height="64" :playtime="false" :playtime-font-size="0" noplayed-line-color="#336cfb" playtime-line-color="#ABC123" :playtime-slider="true"
+    ></av-waveform>
+        </div>
     </section>
 </template>
 
diff --git a/src/renderer/main.js b/src/renderer/main.js
index a883628..13dc9da 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -4,10 +4,12 @@ import axios from 'axios'
 import App from './App'
 import router from './router'
 import store from './store'
+import AudioVisual from 'vue-audio-visual'
 
 if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
 Vue.http = Vue.prototype.$http = axios
 Vue.config.productionTip = false
+Vue.use(AudioVisual)
 
 /* eslint-disable no-new */
 new Vue({
diff --git a/static/demo/artwork.jpg b/static/demo/artwork.jpg
new file mode 100644
index 0000000..66e7a96
Binary files /dev/null and b/static/demo/artwork.jpg differ
diff --git a/static/demo/music.mp3 b/static/demo/music.mp3
new file mode 100644
index 0000000..8651b37
Binary files /dev/null and b/static/demo/music.mp3 differ