Comment écrire un simple lecteur audio en ligne via PHP-tutoriel php-php.cn

Comment écrire un simple lecteur audio en ligne via PHP

WBOY

Libérer： 2023-09-24 08:54:02

original

906 Les gens l'ont consulté

Comment écrire un simple lecteur audio en ligne via PHP

À l'ère d'Internet d'aujourd'hui, la diffusion et le partage de ressources audio deviennent de plus en plus pratiques, donc développer un lecteur audio en ligne est devenu un projet très pratique et intéressant. Cet article explique comment écrire un simple lecteur audio en ligne via PHP et fournit des exemples de code spécifiques.

Pour mettre en œuvre un lecteur audio en ligne, nous avons besoin des éléments suivants :

Disposition de l'interface : utilisée pour afficher l'interface du lecteur audio ;
Gestion des ressources audio : télécharger les fichiers audio sur le serveur et les gérer ; contrôleur : utilisé pour la lecture, la pause, le réglage du volume et d'autres opérations ;
Mise à jour de la progression audio en temps réel.
Tout d'abord, nous avons besoin d'une disposition d'interface pour afficher le lecteur audio. Créez un fichier HTML, par exemple player.html, et ajoutez le code suivant :

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

Copier après la connexion

Dans le code ci-dessus, nous avons utilisé la balise <audio> pour créer un lecteur audio, et spécifiez l'attribut src comme audio.mp3. Ce chemin peut être modifié en fonction de la situation réelle. Ouvrez player.html dans votre navigateur et vous verrez une interface de lecteur audio de base. player.html，并添加以下代码：

<?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 "上传成功！";
    } else {
        echo "上传失败！";
    }
}
?>

Copier après la connexion

在上面的代码中，我们使用了<audio>标签来创建一个音频播放器，并指定src属性为audio.mp3，这个路径可以根据实际情况进行修改。在浏览器中打开player.html，你将看到一个基本的音频播放器界面。

接下来，我们需要实现音频资源管理的功能。创建一个PHP文件，例如upload.php，并添加以下代码：

<script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.onplay = function() {
        console.log("音频播放中...");
    }
    audioPlayer.onpause = function() {
        console.log("音频暂停。");
    }
    audioPlayer.onvolumechange = function() {
        console.log("音量变化：" + audioPlayer.volume);
    }
</script>

Copier après la connexion

在上述代码中，我们通过$_FILES变量来接收用户上传的音频文件。首先检查文件上传是否成功，如果成功，将文件移动到指定的目录（在例子中为uploads/），最后输出相应的信息。

然后，我们需要实现播放控制器的功能。修改player.html文件的代码，添加一个<script>标签，并在其中添加以下代码：

<script>
    var audioPlayer = document.getElementById("audioPlayer");
    audioPlayer.ontimeupdate = function() {
        var currentTime = audioPlayer.currentTime;
        var duration = audioPlayer.duration;
        console.log("当前时间：" + currentTime + "，总时长：" + duration);
    }
</script>

Copier après la connexion

在上述代码中，我们通过getElementById方法获取到了音频播放器的对象，并添加了一些事件监听器，用于在音频播放、暂停、音量变化时输出相应的信息。

最后，我们需要实时更新音频进度。修改player.html文件的代码，添加一个<script>标签，并在其中添加以下代码：

rrreee

在上述代码中，我们通过ontimeupdate

Ensuite, nous devons implémenter la fonction de gestion des ressources audio. Créez un fichier PHP, tel que upload.php, et ajoutez le code suivant :

rrreee

Dans le code ci-dessus, nous recevons les fichiers audio téléchargés par l'utilisateur via le

$_FILES code> variable. Vérifiez d'abord si le téléchargement du fichier a réussi. En cas de succès, déplacez le fichier vers le répertoire spécifié (<code>uploads/

dans l'exemple), et enfin affichez les informations correspondantes.

Ensuite, nous devons implémenter la fonction du contrôleur de lecture. Modifiez le code du fichier player.html, ajoutez une balise <script>, et ajoutez-y le code suivant :

rrreee🎜Dans le code ci-dessus, on passe La méthode getElementById obtient l'objet du lecteur audio et ajoute des écouteurs d'événements pour afficher les informations correspondantes lorsque l'audio est lu, mis en pause et que le volume change. 🎜🎜Enfin, nous devons mettre à jour la progression audio en temps réel. Modifiez le code du fichier player.html, ajoutez une balise <script>, et ajoutez-y le code suivant : 🎜rrreee🎜Dans le code ci-dessus, on passe Événement ontimeupdate pour mettre à jour l'heure de lecture actuelle et la durée totale en temps réel, et afficher les informations correspondantes. 🎜🎜Jusqu'à présent, nous avons implémenté un simple lecteur audio en ligne. Vous pouvez déployer ces fichiers localement ou sur un serveur et les tester. Avec des fonctions telles que le téléchargement de fichiers audio, le contrôle de la lecture, le réglage du volume et les mises à jour de la progression audio en temps réel, vous pouvez obtenir un lecteur audio en ligne complet. 🎜🎜Résumé : 🎜Cet article explique comment écrire un lecteur audio en ligne simple via PHP, y compris la disposition de l'interface, la gestion des ressources audio, le contrôleur de lecture et la mise à jour en temps réel de la progression audio et d'autres fonctions. Avec les exemples de code ci-dessus, vous pouvez commencer à écrire votre propre lecteur audio et étendre ses fonctionnalités pour répondre à vos besoins réels. J'espère que cet article pourra vous être utile et je vous souhaite une bonne programmation ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!