added audio to carousel page

assets/css/carousel.css

@@ -2,6 +2,10 @@ body {
   padding: 70px 0;
 }
 
+.card p {
+  font-size: 18;
+}
+
 .container {
   margin: 0 auto;
   display: flex;
@@ -89,6 +93,7 @@ body {
   left: 5em;
 }
 
+
 @media only screen and (min-width: 1080px) {
 .card {
   width: 350px;

assets/js/carousel.js

@@ -1,6 +1,7 @@
 var carousel = document.querySelector('.carousel');
 var cellCount = 6;
 var selectedIndex = 0;
+var songIndex = 0
 
 function rotateCarousel() {
   var angle = selectedIndex / cellCount * -360;
@@ -11,12 +12,16 @@ var prevButton = document.querySelector('.prev');
 prevButton.addEventListener( 'click', function() {
   selectedIndex--;
   rotateCarousel();
+  decreaseSongIndex();
+  playTile()
 });
 
 var nextButton = document.querySelector('.next');
 nextButton.addEventListener( 'click', function() {
   selectedIndex++;
   rotateCarousel();
+  increaseSongIndex();
+  playTile()
 });
 
 
@@ -40,4 +45,38 @@ const populateCarousel = () => {
 }
 
 
-populateCarousel()
+// Play music displayed on carousel
+const playTile = () => {
+
+    const audio = document.getElementById('carousel-audio-player')
+    const track = SONGS[songIndex];
+
+    audio.setAttribute("src", track.link)
+  }
+
+
+// Increment song
+const increaseSongIndex = () => {
+    songIndex++
+    if(songIndex === SONGS.length)
+    songIndex = 0
+    console.log(songIndex)
+}
+
+// Decrease song index
+const decreaseSongIndex = () => {
+  if(songIndex === 0)
+    songIndex = SONGS.length
+
+  songIndex--
+  console.log(songIndex)
+}
+
+// 
+
+
+populateCarousel()
+playTile()
+
+
+// Play current song in slider 

carousel.html

@@ -26,6 +26,10 @@ <h1>Carousel</h1>
     <button class="next">Next</button>
     <button class="prev">Prev</button>
 
+    <audio id="carousel-audio-player" controls>
+        <source src="">
+    </audio>
+
     <script src="assets/js/data.js"></script>
     <script src="assets/js/carousel.js"></script>
 </body>