mrmoi
/
SadPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Téléverser les fichiers vers "/"

This commit is contained in:
mrmoi 2025-07-31 23:05:14 +02:00
commit 230c4e36bc
3 changed files with 100 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html Normal file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lecteur Audio</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Mes Fichiers Audio</h1>
<div id="audio-list"></div>
<script src="script.js"></script>
</body>
</html>

47
script.js Normal file
View File

@ -0,0 +1,47 @@
fetch('./back/generate.php')
.then(() => fetch('./back/media_list.json'))
.then(res => res.json())
.then(data => {
const container = document.getElementById('audio-list');
container.innerHTML = '';
Object.entries(data).forEach(([category, files]) => {
const section = document.createElement('section');
if (data[category].length !== 0) {
const button = document.createElement('button');
button.setAttribute("id", category);
const title = document.createElement('h3');
title.textContent = category === 'racine' ? 'Fichiers sans dossier' : category;
button.appendChild(title);
button.addEventListener("click", function() {
elements = document.querySelectorAll(`div#${this.id}`);
for (const el of elements) {
if (el.className.includes("audio-item")) {
if (el.className.includes("hidden")) {
el.classList.remove("hidden");
} else {
el.classList.add("hidden");
}
}
}
});
section.appendChild(button);
}
files.forEach(file => {
const path = category === 'racine' ? file : `${category}/${file}`;
const item = document.createElement('div');
item.className = 'audio-item hidden';
item.id = category;
item.innerHTML = `
<p><strong>${file}</strong></p>
<audio controls src="./media/${path}"></audio>
<p><a href="./media/${path}" download>Télécharger</a></p>
`;
section.appendChild(item);
});
container.appendChild(section);
});
});

39
style.css Normal file
View File

@ -0,0 +1,39 @@
* {
background-color: #14141e;
color: #ebebeb;
}
body {
font-family: sans-serif;
padding: 2rem;
max-width: 700px;
margin: auto;
}
#audio-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.audio-item {
border: 1px solid #ccc;
border-radius: 8px;
padding: 1rem;
margin-bottom: 0.5rem;
}
audio {
width: 100%;
}
.hidden {
display: none;
}
button {
display: inline-block;
padding: 0.15rem 1.25rem;
margin-bottom: 0.5rem;
border: white solid 1px;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
}