assignment-blocjams-intro

README.md

@@ -0,0 +1,2 @@
+# Audio Player Project
+A jQuery-driven music player app

index.html

@@ -4,8 +4,8 @@
     <title>Bloc Jams</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
-    <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
+    <link rel="stylesheet" type="text/css" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
     <link rel="stylesheet" type="text/css" href="styles/album.css">
     <link rel="stylesheet" type="text/css" href="styles/player-bar.css">
@@ -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  -->
@@ -82,5 +82,6 @@ <h2 class="artist"></h2>
     <script src="scripts/album-info.js"></script>
     <script src="scripts/song-list.js"></script>
     <script src="scripts/player-bar.js"></script>
+    <script src="scripts/helper.js"></script>
   </body>
 </html>

scripts/album-info.js

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

scripts/helper.js

@@ -0,0 +1,17 @@
+class Helper{
+
+  playPauseAndUpdate (song) {
+
+    player.playPause(song);
+
+    const totalTime = player.currentlyPlaying.duration;
+
+    $('#time-control .total-time').text( totalTime );
+
+  }
+
+}
+
+
+
+const helper = new Helper();

scripts/player-bar.js

@@ -0,0 +1,60 @@
+{
+  $('button#play-pause').on('click', function() {
+       helper.playPauseAndUpdate();
+       $(this).attr('playState', player.playState);
+     });
+
+     $('button#next').on('click', function() {
+       if (player.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];
+       helper.playPauseAndUpdate(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);
+
+      $('#volume-control input').on('input', function (event) {
+    player.setVolume(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);
+
+    setInterval( () => {
+      if(player.playstate !== 'playing') {return; }
+      const currentVolume = player.setVolume();
+      $('#volume-control input').val();
+    }, 1);
+
+      $('button#previous').on('click', function() {
+        if (player.playState !== 'playing') { return; }
+
+        const currentSongIndex = album.songs.indexOf(player.currentlyPlaying);
+        const previousSongIndex = currentSongIndex - 1;
+        if (previousSongIndex == -1) { return; }
+
+        const previousSong = album.songs[previousSongIndex];
+        helper.playPauseAndUpdate(previousSong); 
+            });
+}

scripts/song-list.js

@@ -0,0 +1,24 @@
+{
+   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);
+   });
+ }