vikingeducation · Seeker0 · Oct 27, 2017 · Oct 27, 2017 · Oct 28, 2017 · Oct 30, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/.sass-cache/b4af09dc9c2685233f62656d4822aba0094738eb/styles.scssc b/.sass-cache/b4af09dc9c2685233f62656d4822aba0094738eb/styles.scssc
diff --git a/README.md b/README.md
@@ -1,2 +1,4 @@
 # assignment_royalty_free_music_player
 Ushering in the reign of Royalty Free Music w/ JavaScript.
+
+Jeffrey Dederick
diff --git a/audio/.DS_Store b/audio/.DS_Store
diff --git a/audio/Audiobinger_-_Catching_Feelings.mp3 b/audio/Audiobinger_-_Catching_Feelings.mp3
diff --git a/audio/Caleb_Lemond_-_14_-_Life_Taught_Me.mp3 b/audio/Caleb_Lemond_-_14_-_Life_Taught_Me.mp3
diff --git a/audio/Kadhja_Bonet_-_05_-_Miss_You.mp3 b/audio/Kadhja_Bonet_-_05_-_Miss_You.mp3
diff --git a/audio/Mystery_Mammal_-_08_-_Tip_Toe.mp3 b/audio/Mystery_Mammal_-_08_-_Tip_Toe.mp3
diff --git a/audio/Pipe_Choir_-_10_-_Gemini.mp3 b/audio/Pipe_Choir_-_10_-_Gemini.mp3
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/FF.jpg b/images/FF.jpg
diff --git a/images/RFCrown.jpeg b/images/RFCrown.jpeg
diff --git a/images/RR.jpg b/images/RR.jpg
diff --git a/images/pause.jpg b/images/pause.jpg
diff --git a/images/play_button.png b/images/play_button.png
diff --git a/index.html b/index.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Royalty Free Music Player</title>
+<meta charset="UTF-9">
+<meta name="viewport" content="width= device-width initial-scale=1.0">
+
+<link rel="stylesheet" href="styles.css">
+<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="script.js"></script>
+
+</head>
+<body>
+<header id="header">
+  <img id="logo" src="images/RFCrown.jpeg">
+  <h1>Royalty Free Music Player</h1>
+</header>
+
+<main id="main">
+  <section>
+    <div class='container'>
+    <div class="play"></div>
+  </div>
+    <div class='track'>
+    <h2>Catching Feelings</h2>
+    <p>Audiobinger</p>
+  </div>
+    <audio id='catching-feelings' src="audio/Audiobinger_-_Catching_Feelings.mp3"></audio>
+  </section>
+
+  <section>
+    <div class='container'>
+    <div class="play"></div>
+  </div>
+    <div class='track'>
+    <h2>Life Taught Me</h2>
+    <p>Caleb Lemond</p>
+  </div>
+    <audio id='life-taught-me' src="audio/Caleb_Lemond_-_14_-_Life_Taught_Me.mp3"></audio>
+  </section>
+
+  <section>
+    <div class='container'>
+    <div class="play"></div>
+  </div>
+    <div class='track'>
+    <h2>Miss You</h2>
+    <p>Kadhja Bonet</p>
+  </div>
+    <audio id='miss-you' src="audio/Kadhja_Bonet_-_05_-_Miss_You.mp3"></audio>
+  </section>
+
+  <section>
+    <div class='container'>
+    <div class="play"></div>
+  </div>
+    <div class='track'>
+    <h2>Tip Toe</h2>
+    <p>Mystery Mammal</p>
+  </div>
+    <audio id= 'tip-toe' src="audio/Mystery_Mammal_-_08_-_Tip_Toe.mp3"></audio>
+  </section>
+
+  <section>
+    <div class='container'>
+    <div class="play"></div>
+  </div>
+    <div class='track'>
+    <h2>Gemini</h2>
+    <p>Pipe Choir</p>
+  </div>
+    <audio id='gemini' src="audio/Pipe_Choir_-_10_-_Gemini.mp3"></audio>
+  </section>
+
+</main>
+
+<footer id="foot">
+  <div id="control">
+    <img id="back" src="images/RR.jpg">
+    <div id='img-container'>
+      <img id="playback" src="images/play_button.png">
+    </div>
+    <img id="skip" src="images/FF.jpg">
+  </div>
+  <div class="track">
+  <h2>Song Title</h2>
+  <p>Artist</p>
+</div>
+<audio id="sound"></audio>
+</footer>
+
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,176 @@
+let audioArray;
+let sectionArray;
+let lastThis;
+let newThis;
+
+$(document).ready(function() {
+  audioArray = $('audio');
+  sectionArray = $('section');
+
+  let iconReset = function() {
+    $('div.pause')
+      .addClass('play')
+      .removeClass('pause');
+  };
+
+  let trackIcon = function(element) {
+    if (element.hasClass('play')) {
+      element.removeClass('play').addClass('pause');
+    } else {
+      element.removeClass('pause').addClass('play');
+    }
+  };
+
+  let trackAssign = function(element) {
+    $('#sound').attr(
+      'src',
+      element
+        .parent()
+        .siblings('audio')
+        .attr('src')
+    );
+  };
+
+  let play = function() {
+    $('#sound')
+      .get(0)
+      .play();
+    $('#playback').attr('src', 'images/pause.jpg');
+  };
+
+  let pause = function() {
+    $('#sound')
+      .get(0)
+      .pause();
+    $('#playback').attr('src', 'images/play_button.png');
+  };
+
+  let redHeading = function(element) {
+    element
+      .parent()
+      .siblings('.track')
+      .find('h2')
+      .addClass('playing');
+    $('#foot h2').html(
+      element
+        .parent()
+        .siblings('.track')
+        .find('h2')
+        .html()
+    );
+    $('#foot p').html(
+      element
+        .parent()
+        .siblings('.track')
+        .find('p')
+        .html()
+    );
+  };
+
+  let tracker = function(callback) {
+    for (let i = 0; i < audioArray.length; i++) {
+      if ($(audioArray[i]).attr('src') === $('#sound').attr('src')) {
+        callback(i);
+        nowPlaying();
+        break;
+      }
+    }
+  };
+
+  let backTrack = function(i) {
+    if (i === 0) {
+      $('#sound').attr('src', $(audioArray[audioArray.length - 2]).attr('src'));
+      newThis = sectionArray[sectionArray.length - 1];
+    } else {
+      $('#sound').attr('src', $(audioArray[i - 1]).attr('src'));
+      newThis = sectionArray[i - 1];
+    }
+    play();
+  };
+
+  let skipTrack = function(i) {
+    if (i === audioArray.length - 2) {
+      $('#sound').attr('src', $(audioArray[0]).attr('src'));
+      newThis = sectionArray[0];
+    } else {
+      $('#sound').attr('src', $(audioArray[i + 1]).attr('src'));
+      newThis = sectionArray[i + 1];
+    }
+    play();
+  };
+
+  let restartTrack = function() {
+    $('#sound').get(0).currentTime = 0;
+  };
+
+  // let newThisFinder = function(callback) {
+  //   return tracker(function() {
+  //     return (newThis = sectionArray[i]);
+  //   });
+  // };
+
+  let nowPlaying = function() {
+    iconReset();
+    $('h2').removeClass('playing');
+    $(newThis)
+      .find('h2')
+      .addClass('playing');
+    trackIcon($(newThis).find('div > div'));
+    $('#foot h2').html(
+      $(newThis)
+        .find('h2')
+        .html()
+    );
+    $('#foot p').html(
+      $(newThis)
+        .find('p')
+        .html()
+    );
+    lastThis = $(newThis).find('.pause');
+  };
+
+  $(document.body).on('click', '.play', function() {
+    if (lastThis !== undefined) {
+      lastThis.removeClass('pause').addClass('play');
+      $('h2').removeClass('playing');
+    }
+    trackIcon($(this));
+    trackAssign($(this));
+    play();
+    redHeading($(this));
+    lastThis = $(this);
+  });
+
+  $(document.body).on('click', '.pause', function() {
+    trackIcon($(this));
+    pause();
+  });
+
+  $(document.body).on('click', '#skip', function() {
+    trackIcon(lastThis);
+    return tracker(function(i) {
+      return skipTrack(i);
+    });
+  });
+
+  $(document.body).on('dblclick', '#back', function() {
+    trackIcon(lastThis);
+    return tracker(function(i) {
+      return backTrack(i);
+    });
+  });
+
+  $(document.body).on('click', '#back', function() {
+    restartTrack();
+  });
+
+  $(document.body).on('click', '#playback', function() {
+    if ($('#sound').prop('paused')) {
+      play();
+      trackIcon(lastThis);
+    } else {
+      pause();
+      trackIcon(lastThis);
+    }
+  });
+});
diff --git a/styles.css b/styles.css
diff --git a/styles.css.map b/styles.css.map