Configured WaveSurfer first look

package-lock.json

@@ -463,6 +463,11 @@
       "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
       "dev": true
     },
+    "abortcontroller-polyfill": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/abortcontroller-polyfill/-/abortcontroller-polyfill-1.3.0.tgz",
+      "integrity": "sha512-lbWQgf+eRvku3va8poBlDBO12FigTQr9Zb7NIjXrePrhxWVKdCP2wbDl1tLDaYa18PWTom3UEWwdH13S46I+yA=="
+    },
     "accepts": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",

package.json

@@ -56,6 +56,7 @@
     }
   },
   "dependencies": {
+    "abortcontroller-polyfill": "^1.3.0",
     "axios": "^0.18.0",
     "dominant-color": "0.0.1",
     "normalize-scss": "^7.0.1",

src/renderer/layouts/PlayerBar.vue

@@ -5,16 +5,32 @@
             <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>
-                
+        <div class="visualizer">
+            <div id="visualizer"></div>
         </div>
     </section>
 </template>
 
 <script>
+import WaveSurfer from 'wavesurfer.js'
 export default {
-  name: 'PlayerBar'
+  name: 'PlayerBar',
+  mounted () {
+    const wavesurfer = WaveSurfer.create({
+      container: '#visualizer',
+      waveColor: '#c3c3c3',
+      progressColor: '#336cfb',
+      barWidth: 2,
+      barHeight: 1,
+      barGap: null,
+      autoCenter: true,
+      height: 64
+    })
+    wavesurfer.load('/static/demo/music.mp3')
+    wavesurfer.on('ready', function () {
+      // wavesurfer.play()
+    })
+  }
 }
 </script>
 
@@ -33,4 +49,7 @@ section
         margin: 8px 10px
     p.artist
         color: lighten(black,45)
+    .visualizer
+        flex-grow: 1
+        height: 64px
 </style>

src/renderer/main.js

@@ -1,3 +1,4 @@
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import Vue from 'vue'
 import axios from 'axios'