Maison > Article > développement back-end > Comment développer un lecteur de musique simple en utilisant PHP

Comment développer un lecteur de musique simple en utilisant PHP

WBOYoriginal: 2023-09-25 14:25:421103parcourir

Avec le développement d'Internet, la musique est devenue un élément indispensable de la vie des gens. Afin de répondre aux besoins musicaux des utilisateurs, il est indispensable de développer un lecteur de musique simple. Cet article explique comment utiliser PHP pour développer un lecteur de musique simple et fournit des exemples de code spécifiques.

<!DOCTYPE html>
<html>
<head>
    <title>简单音乐播放器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>简单音乐播放器</h1>
    <div class="music-player">
        <audio id="player" controls></audio>
        <ul id="playlist">
            <?php
                // 遍历音乐目录，生成音乐列表项
                $musicDir = "./music";
                $files = scandir($musicDir);
                foreach ($files as $file) {
                    // 排除.和..
                    if ($file != "." && $file != "..") {
                        echo "<li><a href="music/{$file}">{$file}</a></li>";
                    }
                }
            ?>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Dans le code ci-dessus, nous utilisons la balise HTML <audio></audio> pour jouer de la musique, <ul></ul> et &lt ;li> est utilisée pour afficher la liste des musiques. La fonction scandir() de PHP est utilisée pour parcourir le répertoire musical et générer des éléments de la liste musicale. <audio></audio>标签用于播放音乐，<ul></ul>和<li>标签用于展示音乐列表。PHP的scandir()函数用于遍历音乐目录，生成音乐列表项。

.music-player {
    width: 300px;
    margin: 20px auto;
}

#playlist {
    list-style: none;
    padding: 0;
}

#playlist li {
    margin: 5px 0;
}

#playlist li a {
    text-decoration: none;
    color: #333;
}

#playlist li a:hover {
    color: blue;
}

上述代码通过设置.music-player类的宽度和居中对齐来控制音乐播放器的样式，设置#playlist和#playlist li的样式来控制音乐列表的显示效果。

window.onload = function() {
    var player = document.getElementById("player");
    var playlist = document.getElementById("playlist");
    var links = playlist.getElementsByTagName("a");
    
    // 点击音乐列表项时，切换音乐播放
    for(var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            var file = this.getAttribute("href");
            player.src = file;
            player.play();
            return false;
        };
    }
};

上述代码通过给每个音乐列表项添加点击事件监听器，点击时切换音乐播放。其中getAttribute()方法用于获取音乐文件的路径，play()方法用于播放音乐。

index.html

style.css

script.js

music

index.html

Afin d'embellir l'apparence du lecteur de musique, nous devons également écrire des styles CSS. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <title>简单音乐播放器</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>简单音乐播放器</h1>
    <div class="music-player">
        <audio id="player" controls></audio>
        <ul id="playlist">
            <?php
                $musicDir = "./music";
                $files = scandir($musicDir);
                foreach ($files as $file) {
                    if ($file != "." && $file != "..") {
                        echo "<li><a href="music/{$file}">{$file}</a></li>";
                    }
                }
            ?>
        </ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Le code ci-dessus contrôle le style du lecteur de musique en définissant la largeur et l'alignement central de la classe .music-player, en définissant #playlist et <code>#playlist li pour contrôler l'effet d'affichage de la liste de musique.

Créer une interaction JavaScript

.music-player {
    width: 300px;
    margin: 20px auto;
}

#playlist {
    list-style: none;
    padding: 0;
}

#playlist li {
    margin: 5px 0;
}

#playlist li a {
    text-decoration: none;
    color: #333;
}

#playlist li a:hover {
    color: blue;
}

getAttribute()

play()

index.html

style.css

script.js

index.html

window.onload = function() {
    var player = document.getElementById("player");
    var playlist = document.getElementById("playlist");
    var links = playlist.getElementsByTagName("a");
    
    for(var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            var file = this.getAttribute("href");
            player.src = file;
            player.play();
            return false;
        };
    }
};

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!

php JavaScript css html JS 事件 ul li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment mettre en œuvre les fonctions d'importation et de publication par lots des épreuves de test dans les réponses aux questions en ligneArticle suivant：Comment mettre en œuvre les fonctions d'importation et de publication par lots des épreuves de test dans les réponses aux questions en ligne

Articles Liés

Voir plus