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