feat: finish all the functionalities of thr player

Author: dinushchathurya

src/App.vue

@@ -5,7 +5,19 @@
     </header>
     <main>
       <section class="player">
-        <h2 class="song-title"></h2>
+        <h2 class="song-title">{{ current.title }} <span>{{ current.artist }}</span></h2>
+        <div class="control">
+          <button class="prev" @click="previous">Previous</button>
+          <button class="play" v-if="!isPlaying" @click="play">Play</button>
+          <button class="pause" v-else @click="pause">Pause</button>
+          <button class="next"  @click="next">Next</button>
+        </div>
+      </section>
+      <section class="playlist">
+        <h3>The Playlist</h3>
+        <button v-for="song in songs" :key="song.src" @click="play(song)" :class="(song.src == current.src) ? 'song playing' : 'song'">
+          {{ song.title }} - {{ song.artist}}
+        </button>  
       </section>
     </main>
   </div>
@@ -15,7 +27,61 @@
 
 export default {
   name: 'App',
- 
+  data () {
+    return {
+      current: {},
+      index: 0,
+      isPlaying : false,
+      songs: [
+        {
+          title : 'Suragana Kirilliye',
+          artist: 'Infaass',
+          src : require('./assets/Suragana-Kirilliye-(Remix)-Infaas-Nooruddin.mp3')
+        },
+        {
+          title : 'Yannada Igilli',
+          artist: 'Infaass',
+          src : require('./assets/iraj_get-gone-luca-dayz-iraj-ft-carlprit.mp3')
+        },
+      ],
+      player: new Audio()
+    }
+  },
+  methods: {
+    play (song) {
+      if (typeof song.src != "undefined") {
+        this.current = song;
+        this.player.src = this.current.src;
+      }
+      this.player.play();
+      this.isPlaying = true;
+    },
+    pause (){
+      this.player.pause();
+      this.isPlaying = false;
+    },
+    next(){
+      this.index++;
+      if(this.index > this.songs.lenght - 1){
+        this.index = 0;
+      }
+      this.current = this.songs[this.index];
+      this.play[this.current];
+    },
+    previous(){
+      this.index--;
+      if(this.index < 0){
+        this.index = this.songs.lenght - 1;
+      }
+      this.current = this.songs[this.index];
+      this.play[this.current];
+    }
+  },
+  created() {
+    this.current = this.songs[this.index];
+    this.player.src = this.current.src;
+    
+  }
 }
 </script>
 
@@ -34,6 +100,6 @@ header{
   align-item:center;
   padding: 15px;
   background-color: #212121;
-  color:#fff;
+  color:#fff; 
 }
 </style>