How to develop a simple music player using PHP-PHP Tutorial-php.cn

How to develop a simple music player using PHP

WBOY

Release： 2023-09-25 14:30:02

Original

1136 people have browsed it

How to develop a simple music player using PHP

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.

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

Copy after login

In the above code, we use the HTML <audio> tag to play music, <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.

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

Copy after login

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.

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

Copy after login

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.

index.html

style.css

script.js

music

index.html

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>

Copy after login

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

Copy after login

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

Copy after login

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!