Heim > Artikel > Backend-Entwicklung > So entwickeln Sie einen einfachen Musikplayer mit PHP

So entwickeln Sie einen einfachen Musikplayer mit PHP

WBOYOriginal: 2023-09-25 14:25:421040Durchsuche

Mit der Entwicklung des Internets ist Musik zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Um den Musikbedürfnissen der Benutzer gerecht zu werden, ist die Entwicklung eines einfachen Musikplayers unbedingt erforderlich. In diesem Artikel wird erläutert, wie Sie mit PHP einen einfachen Musikplayer entwickeln, und es werden spezifische Codebeispiele bereitgestellt.

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

Im obigen Code verwenden wir die HTML-Tags <audio></audio> zum Abspielen von Musik, <ul></ul> und &lt ;li> wird zum Anzeigen der Musikliste verwendet. Die Funktion scandir() von PHP wird verwendet, um das Musikverzeichnis zu durchsuchen und Musiklistenelemente zu generieren. <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

Um das Erscheinungsbild des Musik-Players zu verschönern, müssen wir auch CSS-Stile schreiben. Der Beispielcode lautet wie folgt:

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

Der obige Code steuert den Stil des Musikplayers, indem er die Breite und Mittelausrichtung der Klasse .music-player festlegt und #playlist und <code>#playlist li-Stil, um den Anzeigeeffekt der Musikliste zu steuern.

JavaScript-Interaktion erstellen

.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;
        };
    }
};

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie einen einfachen Musikplayer mit PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript css html JS 事件 ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie Batch-Import- und Batch-Veröffentlichungsfunktionen von Testpapieren bei der Online-Beantwortung von FragenNächster Artikel：So implementieren Sie Batch-Import- und Batch-Veröffentlichungsfunktionen von Testpapieren bei der Online-Beantwortung von Fragen

In Verbindung stehende Artikel

Mehr sehen