日本語
日本語
今日のインターネットの急速な発展に伴い、オーディオコンテンツの普及と共有は特に便利になりました。オンラインオーディオプレーヤーの開発は実用的であるだけでなく、Webサイトのマルチメディアエクスペリエンスを豊かにします。この記事では、最初から始まり、完全なコードの例を使用して、PHPを介してシンプルで実用的なオンラインオーディオプレーヤーを作成する方法を説明します。
まず、基本的なオーディオプレーヤーインターフェイスを設計する必要があります。 player.htmlなどのHTMLファイルを作成し、次のコードを書きます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Online Audio Player</title>
</head>
<body>
<h3>Online Audio Player</h3>
<audio id="audioPlayer" controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
上記のコードはHTML5を使用しますタグはプレーヤーを作成します。SRC属性は、実際のストレージの場所に従って調整できるオーディオファイルパスを指定します。ファイルを開くと、基本的な再生インターフェイスが表示されます。
オーディオファイルをアップロードするには、ユーザーがアップロードしたオーディオを受信および保存するために、PHPファイル（ upload.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アレイを介して検出され、成功後、オーディオは指定されたディレクトリに保存されます。実際のアプリケーションでは、アップロードされたファイルの種類とサイズのセキュリティ検証を実行することをお勧めします。
インタラクティブなエクスペリエンスを強化するために、JavaScriptを介してプレイヤーイベントを監視して、再生、一時停止、およびボリュームの変更に対する応答を実現できます。 player.htmlを変更します最後に参加してください：
<script>
var audioPlayer = document.getElementById("audioPlayer");
audioPlayer.onplay = function() {
console.log("オーディオが再生されています...");
}
audioPlayer.onpause = function() {
console.log("オーディオの一時停止。");
}
audioPlayer.onvolumechange = function() {
console.log("ボリュームの変更：" + audioPlayer.volume);
}
</script>
再生の進行状況を追跡するために、 OnTimeUpDateイベントを使用して、現在の時間と合計時間を動的に取得できます。コードの例は次のとおりです。
<script>
var audioPlayer = document.getElementById("audioPlayer");
audioPlayer.ontimeupdate = function() {
var currentTime = audioPlayer.currentTime;
var duration = audioPlayer.duration;
console.log("現在の時刻：" + currentTime + "，合計期間：" + duration);
}
</script>
この記事では、PHPとHTML5を介してシンプルなオンラインオーディオプレーヤーを構築する方法を体系的に説明し、インターフェイス構築、オーディオアップロード管理、再生コントロール、進行状況の更新などの重要な機能をカバーしています。開発者は、さまざまなニーズを満たすために、プレイリスト、オーディオ形式の変換など、これに基づいてより多くの機能を拡張できます。このチュートリアルがあなたに役立ち、スムーズなプログラミングを願っています！
