Tutoriel pour créer un lecteur audio en ligne simple et pratique avec PHP

M66 2025-07-26

Comment rédiger un simple lecteur audio en ligne à l'aide de PHP

Avec le développement rapide d'Internet aujourd'hui, la diffusion et le partage du contenu audio sont devenus particulièrement pratiques. Développer un lecteur audio en ligne est non seulement pratique, mais enrichit également l'expérience multimédia du site Web. Cet article commencera depuis le début et expliquera comment créer un lecteur audio en ligne simple et pratique via PHP, avec des exemples de code complets.

Créer une interface de lecteur audio

Tout d'abord, une interface de base de lecteur audio doit être conçue. Créez un fichier HTML, tel que Player.html , et écrivez le code suivant:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Online Audio Player</title>
</head>
<body>
    <h3>Online Audio Player</h3>
    <audio id="audioPlayer" controls>
        <source src="audio.mp3" type="audio/mpeg">
    </audio>
</body>
</html>

Le code ci-dessus utilise HTML5 La balise crée un lecteur, l'attribut SRC spécifie le chemin du fichier audio, qui peut être ajusté en fonction de l'emplacement de stockage réel. Ouvrez le fichier et vous verrez une interface de lecture de base.

Implémentez le téléchargement audio et la gestion

Afin de télécharger des fichiers audio, vous devez créer un fichier PHP (tel que upload.php ) pour recevoir et enregistrer l'audio téléchargé par l'utilisateur:

 <?php
if ($_FILES['audio']['error'] == UPLOAD_ERR_OK) {
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES['audio']['name']);
    if (move_uploaded_file($_FILES['audio']['tmp_name'], $target_file)) {
        echo "Télécharger avec succès！";
    } else {
        echo "Le téléchargement a échoué！";
    }
}
?>

Dans le code, l'état de téléchargement est détecté via le tableau $ _files , et après succès, l'audio est enregistré dans le répertoire spécifié. Dans les applications pratiques, il est recommandé d'effectuer une vérification de sécurité du type et de la taille de fichiers téléchargés.

Ajouter l'écoute de l'événement de contrôle de lecture

Pour améliorer l'expérience interactive, vous pouvez surveiller les événements des joueurs via JavaScript pour obtenir des réponses aux changements de lecture, de pause et de volume. Modifier Player.html , dans Rejoignez avant la fin:

 <script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.onplay = function() {
        console.log("Audio joue...");
    }
    audioPlayer.onpause = function() {
        console.log("Pause audio。");
    }
    audioPlayer.onvolumechange = function() {
        console.log("Changement de volume：" + audioPlayer.volume);
    }
</script>

Mise à jour en temps réel des progrès de la lecture audio

Afin de suivre les progrès de la lecture, vous pouvez utiliser l'événement OnTimeUpdate pour obtenir dynamiquement l'heure actuelle et le temps total. L'exemple de code est le suivant:

 <script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.ontimeupdate = function() {
        var currentTime = audioPlayer.currentTime;
        var duration = audioPlayer.duration;
        console.log("Heure actuelle：" + currentTime + "，Durée totale：" + duration);
    }
</script>

Résumer

Cet article explique systématiquement comment créer un simple lecteur audio en ligne via PHP et HTML5, couvrant des fonctions clés telles que la construction d'interface, la gestion du téléchargement audio, le contrôle de la lecture et la mise à jour de progrès. Les développeurs peuvent étendre plus de fonctions sur cette base, tels que les listes de lecture, la conversion au format audio, etc., pour répondre à divers besoins. J'espère que ce tutoriel vous sera utile et vous souhaite une programmation fluide!

Connexe

Comment écrire un simple lecteur audio en ligne via PHP