<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Quiz Musical</title>
<style>
body {
color: white;
background-color: #2a0382;
font-family: Arial, sans-serif;
text-align: center;
}
#quiz-container {
max-width: 500px;
margin: 0 auto;
}
#audio-player {
margin-bottom: 10px;
}
#song-info {
display: none;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
}
</style>
</head>
<body>
<div id="quiz-container">
<h1>Quiz Musical</h1>
<?php
// Dossier contenant les fichiers audio (formats supportés : mp3, ogg, flac)
$audio_folder = 'music/';
// Liste des fichiers audio dans le dossier
$audio_files = glob($audio_folder . '*.mp3');
$audio_files = array_merge($audio_files, glob($audio_folder . '*.ogg'));
$audio_files = array_merge($audio_files, glob($audio_folder . '*.flac'));
if (empty($audio_files)) {
echo "<p>Aucun fichier audio trouvé dans le dossier spécifié.</p>";
} else {
// Choix aléatoire d'un fichier audio
$random_file = $audio_files[array_rand($audio_files)];
// Récupérer les métadonnées du fichier audio
require_once 'getID3/getid3/getid3.php';
$getID3 = new getID3;
$audio_info = $getID3->analyze($random_file);
getid3_lib::CopyTagsToComments($audio_info);
// Afficher le lecteur audio avec les métadonnées
if (!empty($audio_info['comments_html']['title'][0]) && !empty($audio_info['comments_html']['artist'][0])) {
$title = $audio_info['comments_html']['title'][0];
$artist = $audio_info['comments_html']['artist'][0];
$album = !empty($audio_info['comments_html']['album'][0]) ? $audio_info['comments_html']['album'][0] : 'Inconnu';
$year = !empty($audio_info['comments_html']['year'][0]) ? $audio_info['comments_html']['year'][0] : '(Année inconnue)';
$cover = !empty($audio_info['comments_html']['attached_picture'][0]) ? base64_encode($audio_info['comments_html']['attached_picture'][0]['data']) : '';
?>
<p><center><i>Trouverez-vous l'artiste et le titre de cette chanson sortie en <?php echo $year; ?> ?</i></center></p>
<audio controls id="audio-player" onloadedmetadata="setInitialTime()" autoplay>
<source src="<?php echo $random_file; ?>" type="audio/mpeg">
Votre navigateur ne supporte pas la lecture audio.
</audio>
<br>
<button onclick="validateAnswer()">Afficher l'artiste et le titre (arrête la lecture)</button><br>
<button onclick="nextSong()">Chanson suivante</button>
<div id="song-info">
<table align="center">
<tr><td>Titre :</td><td><h3><?php echo $title; ?></h3></td></tr>
<tr><td>Artiste :</td><td><h3><?php echo $artist; ?></h3></td></tr>
<tr><td>Album :</td><td><h3><?php echo $album; ?></h3></td></tr>
<tr><td>Année :</td><td><h3><?php echo $year; ?></h3></td></tr>
</table>
<?php
// Afficher les données de la pochette d'album
if (!empty($audio_info['comments']['picture'][0]['data'])) {
$cover_data = $audio_info['comments']['picture'][0]['data'];
$cover_mime = $audio_info['comments']['picture'][0]['image_mime'];
$cover_base64 = 'data:' . $cover_mime . ';base64,' . base64_encode($cover_data);
echo '<img src="' . $cover_base64 . '" alt="Pochette">';
}
?>
</div>
<br>
<script>
let audioPlayer = document.getElementById('audio-player');
let songInfo = document.getElementById('song-info');
function setInitialTime() {
audioPlayer.currentTime = 60; // Démarrer la lecture à 50 secondes
setTimeout(validateAnswer, 30000); // Valider automatiquement après 30 secondes
}
function validateAnswer() {
songInfo.style.display = 'block';
audioPlayer.pause(); // Pause la lecture après 15 secondes
setTimeout(function() {
songInfo.style.display = 'none';
audioPlayer.currentTime = 0; // Remettre la lecture à zéro pour la prochaine chanson
}, 15000);
}
function nextSong() {
window.location.reload(); // Recharger la page pour jouer une nouvelle chanson
}
</script>
<?php
} else {
echo "<p>Aucune métadonnée valide trouvée pour le fichier audio.</p>";
}
}
?>
</div>
</body>
</html>