Cara Membuat Website Streaming Musik dengan PHP dan HTML
Membuat website streaming musik adalah proyek menarik yang memungkinkan Anda membagikan dan memutar musik secara online. Dalam artikel ini, kita akan membahas langkah-langkah untuk membuat website streaming musik sederhana menggunakan PHP dan HTML.
1. Persiapan Proyek
1.1. Struktur Direktori
Pastikan proyek Anda memiliki struktur direktori yang terorganisir:
music-streaming/
|-- music/
| |-- song1.mp3
| |-- song2.mp3
| |-- ...
|-- index.php
|-- player.php
|-- styles.cssSimpan file musik dalam direktori music.
2. HTML untuk Antarmuka Pengguna
2.1. Halaman Utama (index.php)
<!-- index.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Streaming</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Music Streaming</h1>
<ul>
<?php
// Ambil daftar lagu dari direktori
$songs = glob('music/*.mp3');
foreach ($songs as $song) {
$songName = basename($song);
echo "<li><a href='player.php?song=$songName'>$songName</a></li>";
}
?>
</ul>
</div>
</body>
</html>2.2. Pemutar (player.php)
<!-- player.php -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Now Playing</h1>
<?php
// Periksa apakah parameter song ada dalam URL
if (isset($_GET['song'])) {
$songName = $_GET['song'];
echo "<audio controls src='music/$songName' type='audio/mp3'></audio>";
} else {
echo "<p>Lagu tidak ditemukan.</p>";
}
?>
<br>
<a href="index.php">Kembali ke Daftar Lagu</a>
</div>
</body>
</html>3. CSS untuk Desain
Buatlah file styles.css untuk memberikan desain pada halaman.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
h1 {
color: #333;
}
ul {
list-style: none;
padding: 0;
}
li {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
a {
color: #4caf50;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}4. Menjalankan Aplikasi
Pastikan Anda menjalankan aplikasi ini di server web. Buka browser dan akses http://localhost/path/to/index.php untuk melihat daftar lagu. Klik pada lagu untuk mendengarkannya menggunakan pemutar musik sederhana.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat website streaming musik sederhana menggunakan PHP dan HTML. Pastikan untuk menyesuaikan proyek ini sesuai dengan kebutuhan spesifik dan menambahkan fitur tambahan seperti manajemen playlist, penilaian lagu, atau fitur sosial.
