집 > 기사 > 백엔드 개발 > PHP를 사용하여 간단한 음악 플레이어를 개발하는 방법

PHP를 사용하여 간단한 음악 플레이어를 개발하는 방법

WBOY원래의: 2023-09-25 14:25:421039검색

인터넷의 발달로 음악은 사람들의 삶에 없어서는 안될 부분이 되었습니다. 음악에 대한 사용자의 요구를 충족시키기 위해서는 간단한 음악 플레이어의 개발이 매우 필요합니다. 이 기사에서는 PHP를 사용하여 간단한 음악 플레이어를 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

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

위 코드에서는 HTML <audio></audio> 태그를 사용하여 음악을 재생하고, <ul></ul> 및 <li> 태그는 음악 목록을 표시하는 데 사용됩니다. PHP의 scandir() 함수는 음악 디렉토리를 탐색하고 음악 목록 항목을 생성하는 데 사용됩니다. <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

뮤직 플레이어의 외관을 아름답게 하려면 CSS 스타일도 작성해야 합니다. 샘플 코드는 다음과 같습니다.

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

위 코드는 .music-player 클래스의 너비와 가운데 정렬, #playlist 및 <code>#playlist li 스타일을 사용하여 음악 목록의 표시 효과를 제어할 수 있습니다.

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

위 내용은 PHP를 사용하여 간단한 음악 플레이어를 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript css html JS 事件 ul li

성명：

이전 기사：온라인 답변 문제에서 시험지 일괄 가져오기 및 일괄 게시 기능을 구현하는 방법다음 기사：온라인 답변 문제에서 시험지 일괄 가져오기 및 일괄 게시 기능을 구현하는 방법