Bloc jams barbuttons

index.html

@@ -25,8 +25,8 @@
         <!-- Album Details -->
         <div class="album-details">
           <h1 id="album-title"></h1>
-          <h2 class="artist"></h2>
-          <div id="release-info"></div>
+          <h2 class="artist">Pablo Picaso</h2>
+          <div id="release-info">1909 Spanish Records</div>
         </div>
       </section>
 
@@ -36,11 +36,11 @@ <h2 class="artist"></h2>
           <col id="song-number-column">
           <col id="song-title-column">
           <col id="song-duration-column">
-        </colgroup>  
+        </colgroup>
       </table>
 
     </main>
-    
+
     <!-- Player Bar  -->
     <section id="player-bar">
       <section id="buttons">
@@ -71,7 +71,7 @@ <h2 class="artist"></h2>
         <div class="icon ion-volume-high"></div>
       </div>
 
-      
+
     </section>
 
     <!-- Scripts  -->

scripts/album-info.js

@@ -0,0 +1,4 @@
+{
+$('#album-title').text(album.title);
+$('img#album-cover-art').attr('src', album.albumArtUrl);
+}

scripts/player-bar.js

@@ -0,0 +1,36 @@
+{
+  $('button#play-pause').on('click', function() {
+    player.playPause();
+    $('button#play-pauuse').attr('playState', player.playState);
+  });
+
+  $('button#next').on('click', function(){
+    player.playPause();
+    $(this).attr('playState', player.playState);
+    )
+  });
+
+  $('button#next').on('click', function(){
+    if(play.playState !== 'playing') {return;}
+  });
+  const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+  const nextSongIndex = currentSongIndex + 1;
+  if(nextSongIndex >= album.songs.length) {return;}
+
+  const nextSong = album.songs[nextSongIndex];
+  player.playPause(nextSong);
+  });
+
+  $('#time-control input').on('input', function (event) {
+     player.skipTo(event.target.value);
+  });
+
+  setInterval( () => {
+    if (player.playState !== 'playing') { return; }
+    const currentTime = player.getTime();
+    const duration = player.getDuration();
+    const percent = (currentTime / duration) * 100;
+    $('#time-control .current-time').text( currentTime );
+    $('#time-control input').val(percent);
+  }, 1000);
+}

scripts/song-list.js

@@ -0,0 +1,25 @@
+{
+  album.songs.forEach( (song, index) => {
+       song.element = $(`
+         <tr>
+         <td>
+          <button>
+            <span class="song-number">${index + 1}</span>
+            <span class="ion-play"></span>
+            <span class="ion-pause"></span>
+          </button>
+        </td>
+           <td>${song.title}</td>
+           <td>${song.duration}</td>
+          </tr>
+       `);
+
+       song.element.on('click', event => {
+       player.playPause(song);
+       $('button#play-pause').attr('playState',player.playState);
+     });
+
+
+      $('#song-list').append(song.element);
+     });
+   }