Home > Article > Backend Development > How to develop a simple music player using PHP
How to develop a simple music player using PHP
- WBOYOriginal
- 2023-09-25 14:25:421040browse
How to use PHP to develop a simple music player
With the development of the Internet, music has become an indispensable part of people's lives. In order to meet users' needs for music, it is very necessary to develop a simple music player. This article will introduce how to use PHP to develop a simple music player and provide specific code examples.
-
<li>Preparation
First, we need to prepare the server environment. Make sure your server supports PHP and has the necessary extensions installed. At the same time, you also need to prepare music files and store them in the specified directory on the server. The directory structure of music files can be organized according to actual needs, such as storing them by artist or album. <li>Building an HTML page
Next, we start building an HTML page to display the music player and music list. The sample code is as follows:
<!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>In the above code, we use the HTML <audio></audio> tag to play music, <ul></ul> and <li> tag is used to display the music list. PHP's scandir() function is used to traverse the music directory and generate music list items.
- <li>Building CSS styles
In order to beautify the appearance of the music player, we also need to write CSS styles. The sample code is as follows:
.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;
}The above code controls the style of the music player by setting the width and center alignment of the .music-player class and setting #playlist and #playlist li styles to control the display effect of the music list.
- <li>Building JavaScript interaction
In order for the music player to work properly, we need to use JavaScript to write interaction logic. The sample code is as follows:
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;
};
}
};The above code adds a click event listener to each music list item to switch music playback when clicked. Among them, the getAttribute() method is used to obtain the path of the music file, and the play() method is used to play music.
- <li>Complete code of music player
Based on the above code snippets, we get the complete code of a simple music player, including HTML page, CSS style and JavaScript logic. You can save the following code as
index.html, style.css and script.js three files, and put the music file in music directory, and then open index.html in the browser to see the effect. HTML page (index.html):
<!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>CSS style (style.css):
.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;
}JavaScript logic (script.js):
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;
};
}
};This is the implementation process of developing a simple music player using PHP. I hope it will be helpful to you, and I hope you can further improve and optimize this music player according to your own needs.
The above is the detailed content of How to develop a simple music player using PHP. For more information, please follow other related articles on the PHP Chinese website!