ホームページ >バックエンド開発 >PHPチュートリアル >PHP 経由でシンプルなオンライン オーディオ プレーヤーを作成する方法
PHP 経由でシンプルなオンライン オーディオ プレーヤーを作成する方法
- WBOYオリジナル
- 2023-09-24 08:43:47964ブラウズ
PHP を使用してシンプルなオンライン オーディオ プレーヤーを作成する方法
今日のインターネット時代では、オーディオ リソースの配布と共有がますます便利になっています。オンラインオーディオプレーヤーは非常に実用的で楽しいプロジェクトになります。この記事では、PHP を使用してシンプルなオンライン オーディオ プレーヤーを作成する方法を紹介し、具体的なコード例を示します。
オンライン オーディオ プレーヤーを実装するには、次の要素が必要です:
- インターフェイス レイアウト: オーディオ プレーヤーの表示に使用されるインターフェイス、
- オーディオ リソース管理:オーディオ ファイルをサーバーにアップロードして管理します。
- 再生コントローラー: 再生、一時停止、音量調整などの操作に使用します。
- オーディオの進行状況をリアルタイムで更新します。
まず、オーディオ プレーヤーを表示するためのインターフェイス レイアウトが必要です。 HTML ファイル (例: player.html) を作成し、次のコードを追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Online Audio Player</title>
</head>
<body>
<h1>Online Audio Player</h1>
<audio id="audioPlayer" controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html> 上記のコードでは、<audio></audio> タグを使用しています。オーディオ プレーヤーを作成し、src 属性を audio.mp3 として指定します。このパスは実際の状況に応じて変更できます。ブラウザで player.html を開くと、基本的なオーディオ プレーヤー インターフェイスが表示されます。
次に、オーディオ リソース管理機能を実装する必要があります。 upload.php などの PHP ファイルを作成し、次のコードを追加します。
<?php
if($_FILES["audio"]["error"] == UPLOAD_ERR_OK) {
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["audio"]["name"]);
if(move_uploaded_file($_FILES["audio"]["tmp_name"], $target_file)) {
echo "上传成功！";
} else {
echo "上传失败！";
}
}
?> 上記のコードでは、$_FILES を通じてユーザーがアップロードした音声を受信します。 可変ドキュメント。まずファイルのアップロードが成功したかどうかを確認し、成功した場合は指定したディレクトリ（例ではuploads/）にファイルを移動し、最後に該当する情報を出力します。
次に、再生コントローラーの機能を実装する必要があります。 player.html ファイルのコードを変更し、<script></script> タグを追加し、その中に次のコードを追加します。
<script>
var audioPlayer = document.getElementById("audioPlayer");
audioPlayer.onplay = function() {
console.log("音频播放中...");
}
audioPlayer.onpause = function() {
console.log("音频暂停。");
}
audioPlayer.onvolumechange = function() {
console.log("音量变化：" + audioPlayer.volume);
}
</script> 上記のコードでは、 getElementById メソッドはオーディオ プレーヤーのオブジェクトを取得し、オーディオの再生、一時停止、音量変更時に対応する情報を出力するいくつかのイベント リスナーを追加します。
最後に、オーディオの進行状況をリアルタイムで更新する必要があります。 player.html ファイルのコードを変更し、<script></script> タグを追加し、その中に次のコードを追加します。
<script>
var audioPlayer = document.getElementById("audioPlayer");
audioPlayer.ontimeupdate = function() {
var currentTime = audioPlayer.currentTime;
var duration = audioPlayer.duration;
console.log("当前时间：" + currentTime + "，总时长：" + duration);
}
</script> 上記のコードでは、 ontimeupdate イベントを渡して現在の再生時間と合計時間をリアルタイムで更新し、対応する情報を出力します。
これまでに、シンプルなオンライン オーディオ プレーヤーを実装しました。これらのファイルをローカルまたはサーバーに展開してテストできます。オーディオ ファイルのアップロード、再生コントロール、音量調整、リアルタイムのオーディオ進行状況の更新などの機能を備えた、完全なオンライン オーディオ プレーヤーを入手できます。
概要:
この記事では、インターフェイス レイアウト、オーディオ リソース管理、再生コントローラー、オーディオの進行状況やその他の機能のリアルタイム更新を含む、PHP を使用したシンプルなオンライン オーディオ プレーヤーの作成方法を紹介します。上記のコード例を使用して、独自のオーディオ プレーヤーの作成を開始し、実際のニーズに合わせてその機能を拡張できます。この記事があなたのお役に立てば幸いです。また、プログラミングが楽しくなることを願っています。
以上がPHP 経由でシンプルなオンライン オーディオ プレーヤーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。