Alle MP3 Dateien eines Ordner Anzeigen/Anhören/Downloaden
Überblick des Skripts
Dieses PHP-Skript dient dazu, eine Liste von MP3-Dateien in einem bestimmten Ordner anzuzeigen. Jede Datei kann heruntergeladen oder direkt im Browser angehört werden. Es stellt sicher, dass nur eine MP3-Datei gleichzeitig abgespielt wird und bietet ein modernes, responsives Design. Zusätzlich wird ein Logo eingebunden und ein App-Icon bereitgestellt.
Hauptbestandteile des Skripts
- HTML-Kopf und -Körper
- CSS für Styling
- PHP-Code zur Anzeige der MP3-Dateien
- JavaScript zur Kontrolle des Audio-Abspielens
- Logo und App-Icon Integration
Detaillierte Beschreibung
1. HTML-Kopf und -Körper
Der HTML-Kopf enthält grundlegende Meta-Tags und Links zu den App-Icons. Der HTML-Körper enthält die Struktur der Seite, einschließlich des Logos, der Sortier-Schaltfläche und der Liste der MP3-Dateien.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3-Dateien</title>
<link rel="apple-touch-icon" sizes="180x180" href="app-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="app-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="app-icon.png">
</head>
<body>
<div class="container">
<img src="12_only.jpg" alt="Logo" class="logo">
<h1>MP3-Dateien im Ordner</h1>
<button class="sort-button" onclick="sortFiles()">Nach Datum sortieren</button>
<ul id="file-list">
<?php
// PHP-Code zur Anzeige der MP3-Dateien wird hier eingefügt
?>
</ul>
<div class="footer">(c) by 12webmaster</div>
</div>
</body>
</html>2. CSS für Styling
Das CSS sorgt für ein modernes und responsives Design. Es enthält Stile für den Körper, den Container, das Logo, die Listen und die Schaltflächen.
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.logo {
display: block;
margin: 0 auto 20px;
max-width: 100px;
}
h1 {
text-align: center;
color: #333;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 20px;
padding: 10px;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
li:last-child {
border-bottom: none;
}
audio {
max-width: 100%;
margin-right: 10px;
}
.footer {
text-align: center;
margin-top: 20px;
color: #777;
}
.sort-button {
display: block;
margin: 0 auto 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>3. PHP-Code zur Anzeige der MP3-Dateien
Der PHP-Code durchsucht den aktuellen Ordner nach MP3-Dateien, sortiert sie nach Datum und zeigt sie in einer Liste an. Jede Datei wird mit einem Audio-Element zum Abspielen und einem Download-Link versehen.
<?php
$directory = '.'; // aktueller Ordner
$files = glob($directory . '/*.mp3'); // alle MP3-Dateien im Ordner
usort($files, function($a, $b) {
return filemtime($b) - filemtime($a); // Sortierung nach Datum, neueste zuerst
});
if (count($files) == 0) {
echo '<li>Keine MP3-Dateien gefunden.</li>';
} else {
foreach ($files as $file) {
$basename = basename($file);
$date = date("d.m.Y H:i:s", filemtime($file));
echo '<li>';
echo '<audio controls>';
echo '<source src="' . htmlspecialchars($file) . '" type="audio/mpeg">';
echo 'Ihr Browser unterstützt das Audio-Element nicht.';
echo '</audio>';
echo '<div>';
echo '<a href="' . htmlspecialchars($file) . '" download="' . htmlspecialchars($basename) . '">Download</a>';
echo ' - ' . htmlspecialchars($basename) . '<br>';
echo '<small>Hochgeladen am: ' . $date . '</small>';
echo '</div>';
echo '</li>';
}
}
?>4. JavaScript zur Kontrolle des Audio-Abspielens
Das JavaScript sorgt dafür, dass nur ein Audio-Element gleichzeitig abgespielt wird. Es pausiert alle anderen Audio-Elemente, wenn ein neues Audio-Element abgespielt wird.
<script>
document.addEventListener('DOMContentLoaded', function() {
let audios = document.querySelectorAll('audio');
audios.forEach(audio => {
audio.addEventListener('play', function() {
audios.forEach(otherAudio => {
if (otherAudio !== audio) {
otherAudio.pause();
}
});
});
});
});
function sortFiles() {
let list = document.getElementById('file-list');
let items = list.querySelectorAll('li');
let itemsArr = Array.prototype.slice.call(items, 0);
itemsArr.sort(function(a, b) {
let dateA = new Date(a.querySelector('small').innerText.split(': ')[1]);
let dateB = new Date(b.querySelector('small').innerText.split(': ')[1]);
return dateB - dateA;
});
for (let i = 0; i < itemsArr.length; ++i) {
list.appendChild(itemsArr[i]);
}
}
</script>5. Logo und App-Icon Integration
Das Logo wird im HTML-Bereich mit einem <img>-Tag eingefügt. Die <link>-Tags im HTML-Kopf verweisen auf die App-Icons, die auf dem Smartphone als App-Icon verwendet werden.
<img src="12_only.jpg" alt="Logo" class="logo">
<link rel="apple-touch-icon" sizes="180x180" href="app-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="app-icon.png">
<link rel="icon" type="image/png" sizes="16x16" href="app-icon.png">Zusammenfassung
Das Skript stellt sicher, dass die MP3-Dateien benutzerfreundlich angezeigt und verwaltet werden. Durch die Integration von CSS, PHP und JavaScript wird eine moderne, responsive Oberfläche geschaffen. Zudem wird die Kontrolle des Audio-Abspielens optimiert und das Skript mit einem Logo und App-Icon versehen, um eine professionelle Präsentation zu gewährleisten.
Das komplette Script könnt Ihr in Kürze downloaden