Day50: Music Player

edyoda · Dec 8, 2022 · 53ddb49 · 53ddb49
1 parent 917dc39
commit 53ddb49
Show file tree

Hide file tree

Showing 4 changed files with 396 additions and 0 deletions.
diff --git a/javascript/Day50/Music-Player-main/README.md b/javascript/Day50/Music-Player-main/README.md
@@ -0,0 +1,2 @@
+# Music-Player
+A training project project for HTML, CSS, Javascript and jQuery. 
diff --git a/javascript/Day50/Music-Player-main/index.html b/javascript/Day50/Music-Player-main/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Music Player</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
+      integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link href="./style.css" rel="stylesheet" type="text/css" />
+  </head>
+
+  <body>
+    <main>
+      <article class="music-player">
+        <section class="left-section">
+          <div class="track-image">
+            <img src="" alt="track-image" />
+          </div>
+
+          <div class="track">
+            <audio controls id="audio-system">
+              <source type="audio/mp3" src="" />
+            </audio>
+          </div>
+
+          <div class="track-controls-wrapper">
+            <div class="track-controls">
+              <button id="play-btn" class="btn hover-effect" title="Play">
+                <i class="fa-solid fa-play"></i>
+              </button>
+              <button id="pause-btn" class="btn hover-effect" title="Pause">
+                <i class="fa-solid fa-pause"></i>
+              </button>
+            </div>
+          </div>
+          <div class="track-details">
+            <p class="track-title">Track Title</p>
+            <p class="track-singer">Singer</p>
+          </div>
+        </section>
+        <section class="right-section"></section>
+
+        <section class="loader-wrapper">
+          <div class="loader"></div>
+        </section>
+      </article>
+    </main>
+
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.min.js"
+      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
+      crossorigin="anonymous"
+    ></script>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/javascript/Day50/Music-Player-main/script.js b/javascript/Day50/Music-Player-main/script.js
@@ -0,0 +1,132 @@
+var trackArray = [];
+$(function () {
+  const audioSystem = $("#audio-system")[0];
+
+  audioSystem.repeatCurretTrack = repeatCurretTrack;
+  const playBtn = $("#play-btn");
+  const pauseBtn = $("#pause-btn");
+
+  playBtn.on({
+    click: function () {
+      audioSystem.play();
+      playBtn.hide();
+      pauseBtn.show();
+    },
+  });
+  pauseBtn.on({
+    click: function () {
+      audioSystem.pause();
+      pauseBtn.hide();
+      playBtn.show();
+    },
+  });
+
+  getTracks();
+});
+
+function repeatCurretTrack() {
+  this.pause();
+  this.currentTime = 0;
+}
+
+const BASE_URL = "https://5dd1894f15bbc2001448d28e.mockapi.io";
+const END_POINTS = {
+  getPlaylist: "/playlist",
+};
+
+function getTracks() {
+  showLoader();
+  $.get(`${BASE_URL}${END_POINTS.getPlaylist}`, function (data) {
+    if (data && data.length) {
+      trackArray = data;
+      createList(data);
+      plugTrack(data[0]);
+    } else {
+      console.log("No track Available");//UI to show the User that no track available
+    }
+  })
+    .fail(function (e) {
+      console.log(e);
+    })
+    .always(function (e) {
+      hideLoader();
+    });
+}
+
+function createList(trackList) {
+  const container = $(".right-section");
+  trackList.forEach((item, index) => {
+    const listItem = createListItem(item, index);
+
+    container.append(listItem);
+  });
+}
+
+function createListItem(trackDetails) {
+  const trackTemplate = createTemplate(trackDetails);
+  const listItem = $(trackTemplate);
+  listItem.on({
+    click: function () {
+      const id = $(this).attr("data-id");
+      const track = trackArray.find((i) => i.id === id);
+      plugTrack(track);
+    },
+  });
+  return listItem;
+}
+
+function createTemplate(trackDetails, index) {
+  const { id, artist, albumCover, track } = trackDetails;
+  return `
+        <div class="list-item" data-id=${id}>
+            <div class="list-item-image">
+                 <img
+                    src=${albumCover}
+                    alt=${track}
+                />
+            </div>
+            <div class="list-item-details">
+                <p class="list-item-title">${track}</p>
+                <p class="list-item-singer">${artist}</p>
+            </div>
+        </div>
+    `;
+}
+
+function plugTrack(trackDetails) {
+  const { file, artist, albumCover, track } = trackDetails;
+
+  const trackImage = $(".track-image img");
+  const audioSystem = $("#audio-system"); // we just need to target #audio-system, we dont need source. Try after removing source from selector
+  const title = $(".track-title");
+  const singer = $(".track-singer");
+  const playBtn = $("#play-btn");
+  const pauseBtn = $("#pause-btn");
+
+  trackImage.attr("src", albumCover);
+  audioSystem.attr("src", file);
+  title.html(track);
+  singer.html(artist);
+  pauseBtn.hide();
+  playBtn.show();
+}
+
+function showLoader() {
+  const leftSection = $(".left-section");
+  const rightSection = $(".right-section");
+  const loader = $(".loader-wrapper");
+
+  leftSection.hide();
+  rightSection.hide();
+  loader.show();
+}
+
+function hideLoader() {
+  const leftSection = $(".left-section");
+  const rightSection = $(".right-section");
+  const loader = $(".loader-wrapper");
+
+  loader.hide(); // display: none
+  leftSection.css("display", "flex");
+  rightSection.show(); //  display: block
+}
diff --git a/javascript/Day50/Music-Player-main/style.css b/javascript/Day50/Music-Player-main/style.css
@@ -0,0 +1,202 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+html {
+  height: 100%;
+}
+body {
+  height: 100%;
+  background-image: linear-gradient(to right, #2ebf91, #8360c3);
+}
+main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+.music-player {
+  background-color: rgba(255, 223, 238, 0.4);
+  box-shadow: 4px 4px 8px rgb(135 206 250 / 40%);
+  padding: 20px;
+  display: flex;
+  border-radius: 8px;
+  width: 70%;
+  max-width: 900px;
+}
+.music-player section {
+  display: none;
+}
+.left-section {
+  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  width: 60%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.right-section {
+  width: 40%;
+}
+
+.track-image {
+  width: 200px;
+  height: 200px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.track-image img {
+  height: 100%;
+  width: 100%;
+}
+
+.track {
+  margin: 20px 0px;
+}
+#audio-system {
+  display: none;
+}
+
+.btn {
+  border: 2px solid black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 100%;
+  height: 32px;
+  width: 32px;
+  background-color: transparent;
+  font-size: 18px;
+  cursor: pointer;
+}
+
+#pause-btn {
+  display: none;
+}
+
+.hover-effect {
+  opacity: 0.6;
+}
+
+.hover-effect:hover {
+  opacity: 1;
+}
+
+.track-details {
+  margin-top: 30px;
+  text-align: center;
+}
+
+.track-title {
+  font-weight: 600;
+  font-size: 24px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.track-singer {
+  margin-top: 20px;
+}
+
+.right-section {
+  padding-left: 20px;
+  max-height: 80vh;
+  overflow: auto;
+}
+
+.list-item {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  cursor: pointer;
+}
+
+.list-item-image {
+  height: 60px;
+  width: 60px;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.list-item-image img {
+  height: 100%;
+  width: 100%;
+}
+
+.list-item-details {
+  margin-left: 20px;
+  padding-top: 4px;
+}
+
+.list-item-title {
+  font-weight: 600;
+  font-family: Arial, Helvetica, sans-serif;
+  margin-bottom: 8px;
+}
+.list-item-singer {
+  font-size: 14px;
+}
+.loader-wrapper {
+  width: 100%;
+}
+
+.loader {
+  margin: 0 auto;
+  border: 16px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 16px solid blue;
+  border-right: 16px solid green;
+  border-bottom: 16px solid red;
+  border-left: 16px solid pink;
+  width: 120px;
+  height: 120px;
+  -webkit-animation: spin 2s linear infinite;
+  animation: spin 2s linear infinite;
+}
+
+@-webkit-keyframes spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@media screen and (max-width: 660px) {
+  html,
+  main {
+    height: auto;
+  }
+  main {
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    padding: 10px;
+  }
+  .music-player {
+    flex-direction: column;
+    width: 100%;
+  }
+  .left-section,
+  .right-section {
+    width: 100%;
+  }
+  .left-section {
+    border-right: none;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+  .right-section {
+    padding-top: 10px;
+    padding-left: 0px;
+    max-height: none;
+  }
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Music-Player
		A training project project for HTML, CSS, Javascript and jQuery.