한국어
한국어
오늘날 인터넷의 빠른 발전으로 인해 오디오 컨텐츠의 보급 및 공유가 특히 편리 해졌습니다. 온라인 오디오 플레이어를 개발하는 것은 실용적 일뿐 만 아니라 웹 사이트의 멀티미디어 경험도 풍부합니다. 이 기사는 처음부터 시작하여 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 , in을 수정하십시오 끝나기 전에 가입 :
<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를 통해 간단한 온라인 오디오 플레이어를 구축하는 방법을 체계적으로 설명합니다. 개발자는 다양한 요구를 충족시키기 위해 재생 목록, 오디오 형식 변환 등과 같이이 기준으로 더 많은 기능을 확장 할 수 있습니다. 이 튜토리얼이 도움이되기를 바랍니다. 원활한 프로그래밍을 기원합니다!
