mathdatech/Awesome-Python-Scripts
1
0
Fork 0
mirror of https://github.com/hastagAB/Awesome-Python-Scripts.git synced 2024-11-23 20:11:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #272 from techdobz/master

Browse Source 
[+] Added : New Script : Python Update based Web Music Player.
This commit is contained in:
Ayush Bhardwaj 2022-10-05 22:32:25 +05:30 committed by GitHub
commit 0879d79bfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 1033 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -85,6 +85,7 @@ So far, the following projects have been integrated to this repo:
|[Find PhoneNumber in String](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/Find-PhoneNumber-in-String)|[Austin Zuniga](https://github.com/AustinZuniga)| |[Find PhoneNumber in String](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/Find-PhoneNumber-in-String)|[Austin Zuniga](https://github.com/AustinZuniga)|
|[IMDB TV Series Info Extractor](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/imdb_episode_ratings)|[Yash Raj Sarrof](https://github.com/yashYRS) | |[IMDB TV Series Info Extractor](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/imdb_episode_ratings)|[Yash Raj Sarrof](https://github.com/yashYRS) |
|[PX to REM](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/PX-to-REM)|[Atthaphon Urairat](https://github.com/uatthaphon) | |[PX to REM](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/PX-to-REM)|[Atthaphon Urairat](https://github.com/uatthaphon) |
|[py_based_music_player](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/py_based_music_player) | [Bhargav Kuvadiya](https://github.com/techdobz) |
|[Yoda-speak Translator](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/speak_like_yoda)|[sonniki](https://github.com/sonniki) | |[Yoda-speak Translator](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/speak_like_yoda)|[sonniki](https://github.com/sonniki) |
|[SSH Host adder](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/SSH_Host_Adder)|[NinoDoko](https://github.com/NinoDoko)| |[SSH Host adder](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/SSH_Host_Adder)|[NinoDoko](https://github.com/NinoDoko)|
|[Wikipedia-Search](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/Wikipedia-Search)|[Nissaar](https://github.com/Nissaar) | |[Wikipedia-Search](https://github.com/hastagAB/Awesome-Python-Scripts/tree/master/Wikipedia-Search)|[Nissaar](https://github.com/Nissaar) |

25
py_based_music_player/README.md Normal file
View File

@ -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.

189
py_based_music_player/css/main/music.css Normal file
View File

@ -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;
}

184
py_based_music_player/css/main/sidebar.css Normal file
View File

@ -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;
}
}

5
py_based_music_player/css/outside/all.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

162
py_based_music_player/css/webfonts/css2.css Normal file
View File

@ -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;
}

BIN
py_based_music_player/css/webfonts/fa-solid-900.ttf Normal file
View File

Binary file not shown.

BIN
py_based_music_player/css/webfonts/fa-solid-900.woff Normal file
View File

Binary file not shown.

BIN
py_based_music_player/css/webfonts/fa-solid-900.woff2 Normal file
View File

Binary file not shown.

18
py_based_music_player/css/webfonts/lato.css Normal file
View File

@ -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;
}

277
py_based_music_player/js/main/music.js Normal file
View File

@ -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');

6
py_based_music_player/js/main/music_list.js Normal file
View File

@ -0,0 +1,6 @@
const music_list = [
"default"
];
const main_list = {
"default": []
};

17
py_based_music_player/js/main/sidebar.js Normal file
View File

@ -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
}
}

2
py_based_music_player/js/outside/fa.js Normal file
View File

File diff suppressed because one or more lines are too long

2
py_based_music_player/js/outside/jquery-3.6.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

89
py_based_music_player/music.html Normal file
View File

@ -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>

56
py_based_music_player/py_based_music_player.py Normal file
View File

@ -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')