PHP を使用してシンプルな音楽プレーヤーを開発する方法
インターネットの発展に伴い、音楽は人々の生活に欠かせないものになりました。ユーザーの音楽ニーズを満たすためには、シンプルな音楽プレーヤーの開発が非常に必要です。この記事では、PHP を使用して簡単な音楽プレーヤーを開発する方法と、具体的なコード例を紹介します。
- 準備
まず、サーバー環境を準備する必要があります。サーバーが PHP をサポートし、必要な拡張機能がインストールされていることを確認してください。同時に音楽ファイルを準備し、サーバー上の指定されたディレクトリに保存する必要があります。音楽ファイルのディレクトリ構造は、アーティストごとやアルバムごとに保存するなど、実際のニーズに応じて編成できます。 - HTML ページの構築
次に、音楽プレーヤーと音楽リストを表示する HTML ページの構築を開始します。サンプル コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<title>简单音乐播放器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="简单音乐播放器">简单音乐播放器</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>
タグは音楽リストを表示するために使用されます。 PHP の scandir() 関数は、音楽ディレクトリを走査し、音楽リスト項目を生成するために使用されます。 - CSS スタイルの構築
- 音楽プレーヤーの外観を美しくするには、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 インタラクションの構築
- 音楽プレーヤーが適切に動作するには、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を開いて効果を確認します。 HTML ページ (index.html):
<!DOCTYPE html>
<html>
<head>
<title>简单音乐播放器</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="简单音乐播放器">简单音乐播放器</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 サイトの他の関連記事を参照してください。
11ベストPHP URLショートナースクリプト（無料およびプレミアム）Mar 03, 2025 am 10:49 AM多くの場合、キーワードと追跡パラメーターで散らかった長いURLは、訪問者を阻止できます。 URL短縮スクリプトはソリューションを提供し、ソーシャルメディアやその他のプラットフォームに最適な簡潔なリンクを作成します。 これらのスクリプトは、個々のWebサイトにとって価値があります
Instagram APIの紹介Mar 02, 2025 am 09:32 AM2012年のFacebookによる有名な買収に続いて、Instagramはサードパーティの使用のために2セットのAPIを採用しました。これらはInstagramグラフAPIとInstagram Basic Display APIです。
Laravelでフラッシュセッションデータを使用しますMar 12, 2025 pm 05:08 PMLaravelは、直感的なフラッシュメソッドを使用して、一時的なセッションデータの処理を簡素化します。これは、アプリケーション内に簡単なメッセージ、アラート、または通知を表示するのに最適です。 データは、デフォルトで次の要求のためにのみ持続します。 $リクエスト -
LaravelのバックエンドでReactアプリを構築する：パート2、ReactMar 04, 2025 am 09:33 AMこれは、LaravelバックエンドとのReactアプリケーションの構築に関するシリーズの2番目と最終部分です。シリーズの最初の部分では、基本的な製品上場アプリケーションのためにLaravelを使用してRESTFUL APIを作成しました。このチュートリアルでは、開発者になります
Laravelテストでの簡略化されたHTTP応答のモッキングMar 12, 2025 pm 05:09 PMLaravelは簡潔なHTTP応答シミュレーション構文を提供し、HTTP相互作用テストを簡素化します。このアプローチは、テストシミュレーションをより直感的にしながら、コード冗長性を大幅に削減します。 基本的な実装は、さまざまな応答タイプのショートカットを提供します。 Illuminate \ support \ facades \ httpを使用します。 http :: fake（[[ 'google.com' => 'hello world'、 'github.com' => ['foo' => 'bar']、 'forge.laravel.com' =>
PHPのカール：REST APIでPHPカール拡張機能を使用する方法Mar 14, 2025 am 11:42 AMPHPクライアントURL（CURL）拡張機能は、開発者にとって強力なツールであり、リモートサーバーやREST APIとのシームレスな対話を可能にします。尊敬されるマルチプロトコルファイル転送ライブラリであるLibcurlを活用することにより、PHP Curlは効率的なexecuを促進します
Codecanyonで12の最高のPHPチャットスクリプトMar 13, 2025 pm 12:08 PM顧客の最も差し迫った問題にリアルタイムでインスタントソリューションを提供したいですか？ ライブチャットを使用すると、顧客とのリアルタイムな会話を行い、すぐに問題を解決できます。それはあなたがあなたのカスタムにより速いサービスを提供することを可能にします
2025 PHP状況調査の発表Mar 03, 2025 pm 04:20 PM2025 PHP Landscape Surveyは、現在のPHP開発動向を調査しています。 開発者や企業に洞察を提供することを目的とした、フレームワークの使用、展開方法、および課題を調査します。 この調査では、現代のPHP Versioの成長が予想されています
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン
