[+] Added : Python Update based Web Music Player.

2024-10-05 20:39:28 +00:00 · 2022-10-05 21:45:58 +05:30 · 2022-10-05 21:45:58 +05:30 · 164dcb123f
commit 164dcb123f
parent 41aa3fc6e9
16 changed files with 1032 additions and 0 deletions
--- a/py_based_music_player/README.md
+++ b/py_based_music_player/README.md
@ -0,0 +1,25 @@
+# Web Based Music Player , Update Music Using Python
+
+-> Web based ( HTML, CSS , JS) based Music player, but instead of manually changing and adding music use python to do that.
+
+-> Cause without Database it is very hard to maintain this offline music player,
+
+### How to use
+
+-> add your music into assets > music > <create_music_folder> / music files
+
+-> each folder in assets > music will act as playlist.
+
+-> for each music add it's relevant art cover .jpg files into assets > cover > <that_same_folder> / music file cover (with the same name as your relevant  .mp3 file).
+
+-> add album cover into assets > cover > album_cover folder.
+
+-> Now Run `python py_based_music_player.py`
+
+-> this will update the .js file of music data and use can open music.html to see the changes.
+
+### Note
+
+-> On first load their is default folder > which contains music to launch on first start,
+
+you can change that also.
--- a/py_based_music_player/css/main/music.css
+++ b/py_based_music_player/css/main/music.css
@ -0,0 +1,189 @@
+@import url('../webfonts/lato.css');
+
+
+.music-container {
+  background-color: #00353f;
+  width: 80%;
+  border-radius: 15px;
+  margin-left: 20px;
+  box-shadow: 0 20px 20px 0 #335f6a;
+  display: flex;
+  padding: 20px 30px;
+  position: relative;
+  margin: 180px 50px 70px 50px;
+  z-index: 10;
+}
+
+.img-container {
+  position: relative;
+  width: 110px;
+}
+
+
+.img-container img {
+  border-radius: 50%;
+  border: 2px solid #00353f;
+  object-fit: cover;
+  height: 110px;
+  width: inherit;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+  animation: rotate 3s linear infinite;
+  animation-play-state: paused;
+}
+
+.music-container.play .img-container img {
+  animation-play-state: running;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.navigation {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.action-btn {
+  background: transparent;
+  border: 0;
+  color: #93a8b3;
+  font-size: 20px;
+  cursor: pointer;
+  margin: 0 20px;
+}
+
+.action-btn.action-btn-big {
+  color: #93a8b3;
+  font-size: 30px;
+}
+
+.action-btn:focus {
+  outline: 0;
+}
+
+.action-btn:hover {
+  color: #000f19;
+  text-shadow: 0 0 5px #000f19;
+}
+
+.action-btn .repeat-active {
+  color: #000f19;
+}
+
+
+.action-btn .random-active {
+  color: #000f19;
+}
+
+.music-info {
+  background-color: #335f6a;
+  border-radius: 15px 15px 0 0;
+  position: absolute;
+  top: 0;
+  left: 20px;
+  width: calc(100% - 40px);
+  padding: 10px 10px 10px 150px;
+  transform: translateY(0%);
+  transition: transform 0.3s ease-in, opacity 0.3s ease-in;
+  opacity: 0;
+  z-index: 0;
+
+}
+
+.music-info #artist {
+  color: #93a8b3;
+  text-transform: uppercase;
+}
+
+.music-container.play  .music-info {
+  opacity: 1;
+  transform: translateY(-100%);
+}
+
+.music-info h4 {
+  margin: 0;
+}
+
+.progress-container {
+  background: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 10px 0;
+  height: 4px;
+  width: 100%
+}
+
+
+.progress {
+  background-color: #000f19;
+  border-radius: 5px;
+  height: 100%;
+  width: 0%;
+  transition: width 0.1s linear'
+}
+
+.next-queue .list_item {
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+	width: 100%;
+	height: 74px;
+	transition: 0.4s;
+}
+
+.next-queue, li {
+	list-style: none;
+	padding: 0;
+}
+
+
+.next-queue img {
+	width: 50px;
+	height: 50px;
+	margin: 0 12px 0 31px;
+	border-radius: 50%;
+	position: relative;
+	opacity: 0.8;
+	background-size: cover;
+  border-radius: 5px;
+  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+}
+
+.next-queue .info {
+	max-width: 600px;
+}
+
+.next-queue .info .title {
+	color: #ffffff;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.next-queue .info .artist {
+	font-size: 13px;
+	text-transform: uppercase;
+  color: #8fa4af;
+}
+
+.queue-active {
+  border: 3px solid #fff;
+  box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5);
+  padding: 20px;
+}
+
+.next-queue .list_item {
+  width: 80%;
+  margin-left:10px;
+}
--- a/py_based_music_player/css/main/sidebar.css
+++ b/py_based_music_player/css/main/sidebar.css
@ -0,0 +1,184 @@
+/* Google Font Link */
+@import url('../webfonts/css2.css');
+
+html,body{
+  height:100%;
+  min-height:100%; 
+}
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins" , sans-serif;
+}
+
+.music-player{
+  width: 650px;
+  display: flex;
+}
+
+.sidebar{
+  width: 78px;
+  background: #00353f;
+  padding: 6px 14px;
+  z-index: 99;
+  transition: all 0.5s ease;
+}
+.sidebar.open{
+  width: 250px;
+}
+.sidebar .logo-details{
+  height: 60px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.sidebar .logo-details .icon{
+  opacity: 0;
+  transition: all 0.5s ease;
+}
+.sidebar .logo-details .logo_name{
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+  opacity: 0;
+  transition: all 0.5s ease;
+}
+.sidebar.open .logo-details .icon,
+.sidebar.open .logo-details .logo_name{
+  opacity: 1;
+}
+.sidebar .logo-details #btn{
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  font-size: 22px;
+  transition: all 0.4s ease;
+  font-size: 23px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.5s ease;
+}
+.sidebar.open .logo-details #btn{
+  text-align: right;
+}
+.sidebar i{
+  color: #fff;
+  height: 60px;
+  min-width: 50px;
+  font-size: 28px;
+  text-align: center;
+  line-height: 60px;
+}
+.sidebar .nav-list{
+  margin-top: 20px;
+  height: 100%;
+}
+.sidebar li{
+  position: relative;
+  margin: 8px 0;
+  list-style: none;
+}
+.sidebar li .tooltip{
+  position: absolute;
+  top: -20px;
+  left: calc(100% + 15px);
+  z-index: 3;
+  background: #fff;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 15px;
+  font-weight: 400;
+  opacity: 0;
+  white-space: nowrap;
+  pointer-events: none;
+  transition: 0s;
+}
+.sidebar li:hover .tooltip{
+  opacity: 1;
+  pointer-events: auto;
+  transition: all 0.4s ease;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.sidebar.open li .tooltip{
+  display: none;
+}
+
+
+.sidebar li a{
+  display: flex;
+  height: 100%;
+  width: 100%;
+  border-radius: 12px;
+  align-items: center;
+  text-decoration: none;
+  transition: all 0.4s ease;
+  background: #11101D;
+}
+.sidebar li a:hover{
+  background: #FFF;
+}
+.sidebar li a .links_name{
+  color: #fff;
+  font-size: 15px;
+  font-weight: 400;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: 0.4s;
+}
+.sidebar.open li a .links_name{
+  opacity: 1;
+  pointer-events: auto;
+}
+.sidebar li a:hover .links_name,
+.sidebar li a:hover i{
+  transition: all 0.5s ease;
+  color: #11101D;
+}
+.sidebar li i{
+  height: 50px;
+  line-height: 50px;
+  font-size: 18px;
+  border-radius: 12px;
+}
+
+.sidebar li img{
+  height: 45px;
+  width: 45px;
+  object-fit: cover;
+  border-radius: 6px;
+  margin-right: 10px;
+}
+
+.home-section{
+  height: 100%;
+  min-height: 100vh;
+  width: calc(100% - 78px);
+  transition: all 0.5s ease;
+  z-index: 2;
+  background-color: #0a0f28;
+  background-image: linear-gradient(45deg, #0a0f28, #0c0f28);
+}
+.sidebar.open ~ .home-section{
+  left: 250px;
+  width: calc(100% - 250px);
+  background-color: #0a0f28;
+  background-image: linear-gradient(45deg, #0a0f28, #0c0f28);
+}
+.home-section .text{
+  display: inline-block;
+  color: white;
+  font-size: 25px;
+  font-weight: 500;
+  margin: 18px;
+}
+@media (max-width: 420px) {
+  .sidebar li .tooltip{
+    display: none;
+  }
+}
--- a/py_based_music_player/css/outside/all.min.css
+++ b/py_based_music_player/css/outside/all.min.css
--- a/py_based_music_player/css/webfonts/css2.css
+++ b/py_based_music_player/css/webfonts/css2.css
@ -0,0 +1,162 @@
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* devanagari */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
+  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/py_based_music_player/css/webfonts/fa-solid-900.ttf
+++ b/py_based_music_player/css/webfonts/fa-solid-900.ttf
--- a/py_based_music_player/css/webfonts/fa-solid-900.woff
+++ b/py_based_music_player/css/webfonts/fa-solid-900.woff
--- a/py_based_music_player/css/webfonts/fa-solid-900.woff2
+++ b/py_based_music_player/css/webfonts/fa-solid-900.woff2
--- a/py_based_music_player/css/webfonts/lato.css
+++ b/py_based_music_player/css/webfonts/lato.css
@ -0,0 +1,18 @@
+/* latin-ext */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/lato/v23/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
--- a/py_based_music_player/js/main/music.js
+++ b/py_based_music_player/js/main/music.js
@ -0,0 +1,277 @@
+const musicContainer = document.getElementById('music-container')
+const menuList = document.getElementById('menulist')
+
+const playBtn = document.getElementById('play')
+const prevBtn = document.getElementById('prev')
+const nextBtn = document.getElementById('next')
+
+
+const audio = document.getElementById('td-audio')
+const progress = document.getElementById('progress')
+const progressContainer  = document.getElementById('progress-container')
+const title = document.getElementById('title')
+const cover = document.getElementById('cover')
+const div_id = document.getElementsByClassName('music-info')[0]
+const artist = document.getElementById('artist')
+
+// Keep track of song
+let songIndex = 0;
+let songs = [];
+let repeat = false;
+let random = false;
+
+
+function appendHtml(el, str) {
+    var div = document.createElement('div');
+    div.innerHTML = str;
+    while (div.children.length > 0) {
+      el.appendChild(div.children[0]);
+    }
+  }
+
+function CurrentPlaylist(){
+    for(m_index=0;m_index<music_list.length;m_index++){
+        var current_dir = music_list[m_index];
+        var li_html = `<li data-name="${current_dir}"><a href="#"><img src="assets/cover/album_cover/${current_dir}.jpg"><span class="links_name">${current_dir}</span></a><span class="tooltip">${current_dir}</span></li>`
+        appendHtml(menuList,li_html)
+    }
+}
+
+CurrentPlaylist();
+
+function randomNumber(min, max) { 
+    return Math.random() * (max - min) + min;
+}
+
+// Update song details
+function loadSong(song){
+    title.innerText = song['title'];
+    audio.src = song['f_path'];
+    cover.src = song['c_path'];
+    div_id.id = song["id"];
+    artist.innerText = song["artist"];
+}
+
+// Play Song
+function playSong(music_id){
+    musicContainer.classList.add('play');
+    playBtn.querySelector('i.fas').classList.remove('fa-play');
+    playBtn.querySelector('i.fas').classList.add('fa-pause');
+
+    var id_data = music_id;
+    
+    var q_data = document.getElementById(id_data);
+
+    console.log(q_data);
+    console.log(id_data);
+
+    if(q_data){
+        q_data.classList.add('queue-active');
+    }
+
+    audio.play()
+}
+
+function playSelectedSong(music_id){
+
+    var qu_data = document.getElementsByClassName('list_item');
+    for(qu=0;qu<qu_data.length;qu++){
+        qu_data[qu].classList.remove('queue-active');
+    }
+
+    var m_id = music_id.split('q')[0];
+    title.innerText = songs[m_id]['title'];
+    audio.src = songs[m_id]['f_path'];
+    cover.src = songs[m_id]['c_path'];
+    div_id.id = songs[m_id]["id"];
+    artist.innerText = songs[m_id]["artist"];
+    
+    pauseSong(music_id);
+    playSong(music_id);
+}
+
+// Pause Song
+function pauseSong(music_id){
+    musicContainer.classList.remove('play');
+    playBtn.querySelector('i.fas').classList.remove('fa-pause');
+    playBtn.querySelector('i.fas').classList.add('fa-play');
+    
+    var id_data = music_id;
+    
+    
+    var q_data = document.getElementById(id_data);
+
+    if(q_data){
+        q_data.classList.remove('queue-active');
+    }
+
+    audio.pause()
+
+}
+
+// Previous Song
+function prevSong(){
+
+    if(repeat){
+        if(songIndex != 0){
+            songIndex ++;
+        }
+    } else if (random){
+        songIndex = parseInt(randomNumber(0,songs.length));
+    }
+
+    //remove active of the current song
+    var qu_data = document.getElementsByClassName('list_item');
+    for(qu=0;qu<qu_data.length;qu++){
+        qu_data[qu].classList.remove('queue-active');
+    }
+
+
+    //take index and decrease by 1
+    songIndex --;
+    if(songIndex < 0){
+        songIndex = songs.length - 1
+    }
+    loadSong(songs[songIndex])
+    playSong(songIndex + 'q')
+}
+
+// Next Song
+function nextSong(){
+
+    if(repeat){
+        if(songIndex != 0){
+            songIndex --;
+        }
+    } else if (random){
+        songIndex = parseInt(randomNumber(0,songs.length));
+    }
+
+    //remove active of the current song
+    var qu_data = document.getElementsByClassName('list_item');
+    for(qu=0;qu<qu_data.length;qu++){
+        qu_data[qu].classList.remove('queue-active');
+    }
+
+    //take index and decrease by 1
+    songIndex ++;
+    if(songIndex > songs.length - 1){
+        songIndex = 0
+    }
+    loadSong(songs[songIndex])
+    playSong(songIndex + 'q')
+}
+
+// Update progress bar
+function updateProgress(e){
+    // we can get the duration and current time on song from sourceElement
+    const {duration, currentTime} = e.srcElement
+    const progressPercent = (currentTime / duration) * 100
+
+    progress.style.width = `${progressPercent}%`
+}
+
+// Set Progress bar
+function setProgress(e){
+    const width = this.clientWidth // total width
+    const clickX = e.offsetX;
+    const duration = audio.duration;
+
+    // set current time of audio to right position
+    audio.currentTime  = (clickX / width) * duration;
+
+}
+
+function firstDefaultload(dom,playlist_name){
+
+    pauseSong('0');
+    if(playlist_name){
+        var var_name = playlist_name;
+    }else{
+        var var_name = dom.attr('data-name');
+    }
+    console.log(var_name);
+    
+    songs = main_list[var_name];
+    // Initially load song details into DOM
+    loadSong(songs[songIndex],var_name);
+
+    var nextQueue = document.getElementsByClassName('next-queue')[0]
+
+    nextQueue.remove();
+    var temp_html = '<ul class="next-queue" id="next-songs"></ul>';
+    var temp_node = document.getElementsByClassName('home-section')[0];
+    appendHtml(temp_node,temp_html);
+
+    new_node = document.getElementsByClassName('next-queue')[0]
+
+    for(m_index=0;m_index<songs.length;m_index++){
+        var cover_url = songs[m_index]['c_path'];
+        var music_title = songs[m_index]['title'];
+        var music_artist = songs[m_index]['artist'];
+        var li_html = `<li class="list_item" id="${m_index+'q'}"> <div class="thumb"><img src="${cover_url}"></div><div class="info"> <div class="title">${music_title}</div><div class="artist">${music_artist}</div></div></li>`
+        appendHtml(new_node,li_html);
+    }
+
+    $(".list_item").click(function() {
+        playSelectedSong(this.id);
+     });
+
+    playBtn.querySelector('i.fas').classList.remove('fa-pause');
+    playBtn.querySelector('i.fas').classList.add('fa-play');
+}
+
+$('#menulist li').click(function(){
+    firstDefaultload($(this),null);
+});
+
+$('#repeat').click(function(){
+    if($('.repeat-i').hasClass('repeat-active')){
+        $('.repeat-i').removeClass('repeat-active');
+        repeat = false;
+    } else {
+        $('.repeat-i').addClass('repeat-active');
+        repeat = true;
+    }
+});
+
+$('#random').click(function(){
+    if($('.random-i').hasClass('random-active')){
+        $('.random-i').removeClass('random-active');
+        random = false;
+    } else {
+        $('.random-i').addClass('random-active');
+        random = true;
+    }
+});
+
+
+
+// Event listeners
+playBtn.addEventListener('click', ()=> {
+    var music_id = div_id.id;
+    //If it's playing, pause
+    const isPlaying = musicContainer.classList.contains('play')
+    if(isPlaying){
+        pauseSong(music_id+'q');
+    }else {
+        playSong(music_id+'q');
+    }
+})
+
+
+// Change song
+prevBtn.addEventListener('click', prevSong)
+nextBtn.addEventListener('click', nextSong)
+
+// Time/song update event
+audio.addEventListener('timeupdate', updateProgress)
+
+// Click on progress bar
+progressContainer.addEventListener('click', setProgress)
+
+// Song ends
+audio.addEventListener('ended', nextSong)
+
+
+firstDefaultload(null,'default');
--- a/py_based_music_player/js/main/music_list.js
+++ b/py_based_music_player/js/main/music_list.js
@ -0,0 +1,6 @@
+const music_list = [
+    "default"
+];
+const main_list = {
+    "default": []
+};
--- a/py_based_music_player/js/main/sidebar.js
+++ b/py_based_music_player/js/main/sidebar.js
@ -0,0 +1,17 @@
+let sidebar = document.querySelector(".sidebar");
+let closeBtn = document.querySelector("#btn");
+
+closeBtn.addEventListener("click", ()=>{
+sidebar.classList.toggle("open");
+menuBtnChange();//calling the function(optional)
+});
+
+
+// following are the code to change sidebar button(optional)
+function menuBtnChange() {
+if(sidebar.classList.contains("open")){
+closeBtn.classList.replace("bx-menu", "bx-menu-alt-right");//replacing the iocns class
+}else {
+closeBtn.classList.replace("bx-menu-alt-right","bx-menu");//replacing the iocns class
+}
+}
--- a/py_based_music_player/js/outside/fa.js
+++ b/py_based_music_player/js/outside/fa.js
--- a/py_based_music_player/js/outside/jquery-3.6.1.min.js
+++ b/py_based_music_player/js/outside/jquery-3.6.1.min.js
--- a/py_based_music_player/music.html
+++ b/py_based_music_player/music.html
@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- ALL THE OUTSIDE CSS -->
+    <link rel="stylesheet" href="css/outside/all.min.css">
+
+    <!-- ALL CUSTOM CSS -->
+    <link rel="stylesheet" href="css/main/music.css">
+    <link rel="stylesheet" href="css/main/sidebar.css">
+
+    <title>Music Player</title>
+
+</head>
+<body>
+
+  <div class="music-player">
+
+    <div class="sidebar">
+      <div class="logo-details">
+          <i class='fas fa-music icon'></i>
+            <div class="logo_name">Music</div>
+            <i class='fas fa-bars' id="btn" ></i>
+      </div>
+
+      <ul class="nav-list" id="menulist">
+          
+      </ul>
+  </div>
+
+  <div class="home-section">
+  
+      <div class="music-container" id="music-container">
+          <div class="music-info" id="">
+            <h4 id="title"></h4>
+            <h5 id="artist"></h5>
+            <div class="progress-container" id="progress-container">
+              <div class="progress" id="progress"></div>
+            </div>
+          </div>
+    
+          <audio src="" id="td-audio"></audio>
+    
+          <div class="img-container">
+            <img src="" alt="music-cover" id="cover" />
+          </div>
+          <div class="navigation">
+            <button id="repeat" class="action-btn">
+              <i class="fas fa-recycle repeat-i"></i>
+            </button>
+            <button id="prev" class="action-btn">
+              <i class="fas fa-backward"></i>
+            </button>
+            <button id="play" class="action-btn action-btn-big">
+              <i class="fas fa-play"></i>
+            </button>
+            <button id="next" class="action-btn">
+              <i class="fas fa-forward"></i>
+            </button>
+            <button id="random" class="action-btn">
+              <i class="fas fa-random random-i"></i>
+            </button>
+          </div>
+      </div>
+
+      <ul class="next-queue" id="next-songs">
+        
+      </ul>
+        
+      </div>
+
+  </div>
+
+    <!-- ALL OUTSIDE SCRIPTS -->
+    <script src="js/outside/jquery-3.6.1.min.js"></script>
+    <script src="js/outside/fa.js"></script>
+
+
+    <!-- ALL MAIN SCRIPTS-->
+    <script src="js/main/music_list.js"></script>
+    <script src="js/main/music.js"></script>
+    <script src="js/main/waveform.js"></script>
+    <script src="js/main/sidebar.js"></script>
+
+</body>
+</html>
--- a/py_based_music_player/py_based_music_player.py
+++ b/py_based_music_player/py_based_music_player.py
@ -0,0 +1,56 @@
+import os
+import json
+from mutagen.mp3 import MP3
+from mutagen.easyid3 import EasyID3
+
+music_dir = 'assets/music/'
+cover_dir = 'assets/cover/'
+js_destination_file = 'js/main/music_list.js'
+
+with open(js_destination_file,'w') as js_file:
+    pass
+
+def work_on_mlist(m_list,m_dir):
+    out_list = []
+    for mp3_index,mp3 in enumerate(m_list):
+        file_path = music_dir + m_dir +  '/' + mp3
+        mp3file = MP3(file_path,ID3=EasyID3)
+        album = mp3file.get('album')
+        artist = mp3file.get('artist')
+        genre = mp3file.get('genre')
+        title = mp3file.get('title')
+        d_dict ={
+            'id': str(mp3_index),
+            'title': title,
+            'artist': artist,
+            'album': album,
+            'genre': genre,
+            'f_path':file_path,
+            'c_path':file_path.replace('.mp3','.jpg').replace('/music/','/cover/')
+        }
+        out_list.append(d_dict)
+    return out_list
+
+def write_in_js_file(py_object, js_var_name):
+    js_object = json.dumps(py_object,indent = 4)
+    var = 'const ' + js_var_name + ' = '
+
+    out_string = var + js_object + ';'
+
+    with open(js_destination_file,'a') as js_file:
+        js_file.write(out_string +'\n')
+
+
+all_list = [d.lower() for d in os.listdir(music_dir)]
+write_in_js_file(all_list,'music_list')
+
+main_dict = {}
+
+for main_dir in os.listdir(music_dir):
+    m_list = os.listdir(music_dir+main_dir)
+    out_list = work_on_mlist(m_list,main_dir)
+    var = main_dir.lower()
+    main_dict[var] = out_list
+
+write_in_js_file(main_dict,'main_list')
+