noham/AM-Exporter
1
0
Fork 0
mirror of https://github.com/NohamR/AM-Exporter.git synced 2026-05-26 04:07:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Music player working

Browse Source
This commit is contained in:
√(noham)²
2024-03-01 17:27:54 +01:00
parent 55253bec44
commit 694a2ebf1d
4 changed files with 94 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
html.html
View File

@@ -9,6 +9,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Music Player</title> <title>Music Player</title>
<script src="player.js"></script>
</head> </head>
<body> <body>
@@ -19,12 +20,15 @@
<div class="info-wrapper"> <div class="info-wrapper">
<img src="https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/94/05/6d/94056dc6-ba11-0c4f-fb1d-ee586224445c/4a754a5f-724e-4400-a78f-06747b604d47.jpg/100x100bb.jpg" <a href="" class="song-url"><img src="" alt="LogoMusicImage" class="artwork_url"></a>
alt="LogoMusicImage">
<div class="info"> <div class="info">
<h1>Tired of a Bewildered Heart</h1> <a href="" class="song-url">
<p>Elijah Lee & Casiio</p> <h1 class="title-song"></h1>
</a>
<a href="" class="artist-url">
<p class="name-artist"></p>
</a>
</div> </div>
</div> </div>
@@ -32,12 +36,11 @@
<div class="track-time"> <div class="track-time">
<div class="track"></div> <div class="track"></div>
<div class="time"> <div class="time">
<div class="total-time">2:12</div> <div class="last-time"></div>
<div class="last-time">00:50</div> <div class="total-time"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

77
player.js Normal file
View File

@@ -0,0 +1,77 @@
function secondsToMinutesAndSeconds(seconds) {
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
}
function fetchDataAndAnimate() {
fetch('http://127.0.0.1:5000/music/get')
.then(response => response.json())
.then(data => {
const artist = data.artist;
const album = data.album;
const artist_url = data.artist_url;
const artwork_url = data.artwork_url;
const time = data.time;
const itunes_url = data.itunes_url;
const name = data.name;
const timestamp = parseFloat(data.timestamp);
const decalage = (Date.now()/1000 - timestamp);
let pPosition = Math.round(parseFloat(data.pPosition) + decalage-3);
const duration = parseFloat(data.duration);
const titleSongElement = document.querySelector('.title-song');
titleSongElement.textContent = name;
const artistSongElement = document.querySelector('.name-artist');
artistSongElement.textContent = artist;
const artwork_urlElement = document.querySelector('.artwork_url');
artwork_urlElement.src = artwork_url;
const artist_urlElement = document.querySelector('.artist-url');
artist_urlElement.href = artist_url;
const songUrlElements = document.querySelectorAll('.song-url');
songUrlElements.forEach(element => {
element.href = itunes_url;
});
const totaltimeElement = document.querySelector('.total-time');
totaltimeElement.textContent = time;
const lasttimeElement = document.querySelector('.last-time');
lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition);
const rapport = (pPosition / duration) * 100;
const trackElements = document.querySelectorAll('.track');
trackElements.forEach(element => {
const style = window.getComputedStyle(element, '::after');
const currentWidth = parseFloat(style.getPropertyValue('width'));
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
});
let intervalId;
function updateProgress() {
const lasttimeElement = document.querySelector('.last-time');
lasttimeElement.textContent = secondsToMinutesAndSeconds(pPosition);
const rapport = (pPosition / duration) * 100;
const trackElements = document.querySelectorAll('.track');
trackElements.forEach(element => {
element.style.setProperty('--new-width', `${rapport.toFixed(2)}%`);
});
pPosition++;
if (pPosition > duration) {
clearInterval(intervalId);
fetchDataAndAnimate();
}
}
intervalId = setInterval(updateProgress, 1000);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
fetchDataAndAnimate();

16
style.css
View File

@@ -31,6 +31,11 @@ body * {
height: 100vh; height: 100vh;
} }
.song-url, .artist-url {
text-decoration: none;
color: inherit;
}
#player { #player {
grid-area: B; grid-area: B;
height: fit-content; height: fit-content;
@@ -103,19 +108,16 @@ body * {
.track::after { .track::after {
content: ''; content: '';
height: 6px; height: 6px;
width: 85%; width: var(--new-width);
display: block; display: block;
background: #D9D9D9; background: #D9D9D9;
border-radius: 10px; border-radius: 10px;
} }
.time { .time {
opacity: 0.7; opacity: 0.7;
font-size: 14px; font-size: 14px;
color: gainsboro; color: gainsboro;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-top: 9.6px; padding-top: 9.6px;
@@ -125,15 +127,9 @@ body * {
#boxes { #boxes {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 270px; max-width: 270px;
margin: auto; margin: auto;
height: auto; height: auto;
padding-block: 60px; padding-block: 60px;
} }
} }

1
test.py
View File

@@ -47,6 +47,7 @@ def main():
if currentsong['status'] == 'playing': if currentsong['status'] == 'playing':
if currentsong['persistent ID'] != persistendId: if currentsong['persistent ID'] != persistendId:
persistendId = currentsong['persistent ID'] persistendId = currentsong['persistent ID']
currentsong['timestamp'] = time.time()
(currentsong['artwork_url'], currentsong['itunes_url'], currentsong['artist_url']) = get_track_extras(currentsong['name'], currentsong['artist'], currentsong['album']) (currentsong['artwork_url'], currentsong['itunes_url'], currentsong['artist_url']) = get_track_extras(currentsong['name'], currentsong['artist'], currentsong['album'])
print(post(currentsong)) print(post(currentsong))
timets = float(currentsong['duration'].replace(",", "."))-float(currentsong['pPosition'].replace(",", ".")) + 3 timets = float(currentsong['duration'].replace(",", "."))-float(currentsong['pPosition'].replace(",", ".")) + 3