PHPを使用してシンプルな音楽プレーヤーを開発する方法-PHPチュートリアル-php.cn

PHPを使用してシンプルな音楽プレーヤーを開発する方法

WBOY

リリース： 2023-09-25 14:30:02

オリジナル

1178 人が閲覧しました

PHPを使用してシンプルな音楽プレーヤーを開発する方法

PHP を使用してシンプルな音楽プレーヤーを開発する方法

インターネットの発展に伴い、音楽は人々の生活に欠かせないものになりました。ユーザーの音楽ニーズを満たすためには、シンプルな音楽プレーヤーの開発が非常に必要です。この記事では、PHP を使用して簡単な音楽プレーヤーを開発する方法と、具体的なコード例を紹介します。

準備
まず、サーバー環境を準備する必要があります。サーバーが PHP をサポートし、必要な拡張機能がインストールされていることを確認してください。同時に音楽ファイルを準備し、サーバー上の指定されたディレクトリに保存する必要があります。音楽ファイルのディレクトリ構造は、アーティストごとやアルバムごとに保存するなど、実際のニーズに応じて編成できます。
HTML ページの構築
次に、音楽プレーヤーと音楽リストを表示する 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>

ログイン後にコピー

上記のコードでは、HTML <audio> タグを使用して音楽を再生します (<ul>##)。 # と

タグは音楽リストを表示するために使用されます。 PHP の scandir() 関数は、音楽ディレクトリを走査し、音楽リスト項目を生成するために使用されます。

音楽プレーヤーの外観を美しくするには、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;
}

ログイン後にコピー

上記のコードは、

.music-player クラスの幅と中央揃えを設定し、# を設定することによって、音楽プレーヤーのスタイルを制御します。 playlist および #playlist li スタイルを使用して、音楽リストの表示効果を制御します。

音楽プレーヤーが適切に動作するには、JavaScript を使用してインタラクションロジックを作成する必要があります。サンプルコードは次のとおりです。

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() メソッドは音楽の再生に使用されます。

上記のコードスニペットに基づいて、HTML ページ、CSS スタイル、JavaScript ロジックを含む、単純な音楽プレーヤーの完全なコードを取得します。次のコードを
index.html、style.css、script.js の 3 つのファイルとして保存し、音楽ファイルを music # に置くことができます。 ## ディレクトリに移動し、ブラウザで 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.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 ロジック (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;
        };
    }
};

ログイン後にコピー

これは、PHP を使用して簡単な音楽プレーヤーを開発する実装プロセスです。これがあなたのお役に立てば幸いです。また、ご自身のニーズに合わせてこの音楽プレーヤーをさらに改良し、最適化していただければ幸いです。

以上がPHPを使用してシンプルな音楽プレーヤーを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。