Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP-tutorial php-php.cn

Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP

WBOY

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

asal

1158 orang telah melayarinya

Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP

Cara membangunkan pemain muzik ringkas menggunakan PHP

Dengan perkembangan Internet, muzik telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Untuk memenuhi keperluan pengguna untuk muzik, adalah sangat perlu untuk membangunkan pemain muzik yang mudah. Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan pemain muzik ringkas dan menyediakan contoh kod khusus.

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

Salin selepas log masuk

Dalam kod di atas, kami menggunakan tag HTML <audio> untuk memainkan muzik, <ul> dan &lt ;li> digunakan untuk memaparkan senarai muzik. Fungsi scandir() PHP digunakan untuk melintasi direktori muzik dan menjana item senarai muzik. <audio>标签用于播放音乐，<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;
}

Salin selepas log masuk

上述代码通过设置.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;
        };
    }
};

Salin selepas log masuk

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

index.html

style.css

script.js

music

index.html

Bina gaya 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>

Salin selepas log masuk

Kod di atas mengawal gaya pemain muzik dengan menetapkan lebar dan penjajaran tengah kelas .music-player, menetapkan #playlist< /code> dan gaya <code >#playlist li untuk mengawal kesan paparan senarai muzik.

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

Salin selepas log masuk

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!