Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP

Bagaimana untuk membangunkan pemain muzik mudah menggunakan PHP

WBOYasal: 2023-09-25 14:25:421131semak imbas

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>

Dalam kod di atas, kami menggunakan tag HTML <audio></audio> untuk memainkan muzik, <ul></ul> dan &lt ;li> digunakan untuk memaparkan senarai muzik. Fungsi scandir() PHP digunakan untuk melintasi direktori muzik dan menjana item senarai muzik. <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

Untuk mencantikkan penampilan pemain muzik, kita juga perlu menulis gaya CSS. Kod sampel adalah seperti berikut:

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

Kod di atas mengawal gaya pemain muzik dengan menetapkan lebar dan penjajaran tengah kelas .music-player, menetapkan #playlist 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;
}

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

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!

php JavaScript css html JS 事件 ul li

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk melaksanakan fungsi import kumpulan dan penerbitan kumpulan kertas ujian dalam menjawab soalan dalam talianArtikel seterusnya：Bagaimana untuk melaksanakan fungsi import kumpulan dan penerbitan kumpulan kertas ujian dalam menjawab soalan dalam talian

Artikel berkaitan

Lihat lagi