Contoh Script untuk MP3 Player Menggunakan Link Direct
Penjelasan Kode
HTML:
<h2>MP3 Player</h2>: Judul untuk pemutar musik.<div id="playlist">: Sebuahdivuntuk menampilkan daftar putar. Judul lagu akan ditambahkan di sini secara dinamis oleh JavaScript.<audio id="audioPlayer" controls>: Elemenaudioadalah pemutar musik bawaan browser. Atributcontrolsakan menampilkan kontrol dasar (play, pause, volume). Kita akan menyembunyikannya dan membuat kontrol kustom kita sendiri untuk tampilan yang lebih baik.<div id="controls">: Wadah untuk tombol kontrol kustom kita.<button id="prevBtn">: Tombol untuk memutar lagu sebelumnya.<button id="playPauseBtn">: Tombol untuk memutar atau menjeda lagu.<button id="nextBtn">: Tombol untuk memutar lagu berikutnya.<div id="nowPlaying">: Untuk menampilkan judul lagu yang sedang diputar.
JavaScript:
playlist,audioPlayer,playPauseBtn,nextBtn,prevBtn,nowPlaying,playlistDiv: Variabel untuk mereferensikan elemen HTML.tracks: Array (daftar) yang berisi URL file MP3 Anda.currentTrackIndex: Variabel untuk melacak lagu mana yang sedang diputar.loadTrack(trackIndex): Fungsi untuk memuat lagu ke dalam elemenaudiodan memperbarui judul yang ditampilkan.playPauseTrack(): Fungsi untuk memutar atau menjeda audio dan mengubah ikon tombol.nextTrack()&prevTrack(): Fungsi untuk berpindah ke lagu berikutnya atau sebelumnya dalam daftar putar.updateNowPlaying(trackIndex): Fungsi untuk menampilkan judul lagu yang sedang diputar dari URL.updatePlaylist(): Fungsi untuk membuat daftar putar yang dapat diklik di halaman.audioPlayer.addEventListener('ended', nextTrack): Secara otomatis memutar lagu berikutnya ketika lagu saat ini selesai.
!DOCTYPE html
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MP3 Player</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
background-color: #f0f2f5;
color: #333;
}
.player-container {
background-color: #ffffff;
padding: 25px;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 400px;
text-align: center;
}
h2 {
margin-top: 0;
color: #111;
}
#nowPlaying {
font-weight: bold;
margin-bottom: 15px;
font-size: 1.1em;
color: #555;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#audioPlayer {
width: 100%;
margin-top: 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.controls button {
background-color: #007bff;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
.controls button:hover {
background-color: #0056b3;
}
#playlist {
list-style: none;
padding: 0;
margin-top: 20px;
max-height: 150px;
overflow-y: auto;
text-align: left;
}
#playlist div {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
transition: background-color 0.3s;
}
#playlist div:hover {
background-color: #f0f0f0;
}
#playlist div.active {
background-color: #e6f2ff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="player-container">
<h2>MP3 Player</h2>
<div id="nowPlaying">Pilih lagu untuk diputar</div>
<audio id="audioPlayer"></audio>
<div class="controls">
<button id="prevBtn">◀◀</button> <button id="playPauseBtn">►</button> <button id="nextBtn">►►</button> </div>
<input type="range" id="progressBar" value="0" style="width: 100%; margin-bottom: 10px;">
<div id="playlist"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tracks = [
{ title: "RAIHAN NASYID (TOP 10 LAGU)", url: "https://od.lk/s/MzNfMzYwNzcwOTBf/RAIHAN%20NASYID%20%28TOP%2010%20LAGU%29.mp3" },
{ title: "TTS Maker File", url: "https://od.lk/s/MzNfMzUzNjAwNjVf/ttsmaker-file-2025-5-21-18-21-15.mp3" }
];
let currentTrackIndex = 0;
const audioPlayer = document.getElementById('audioPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const nextBtn = document.getElementById('nextBtn');
const prevBtn = document.getElementById('prevBtn');
const nowPlaying = document.getElementById('nowPlaying');
const playlistDiv = document.getElementById('playlist');
const progressBar = document.getElementById('progressBar');
function loadTrack(trackIndex) {
if (trackIndex >= 0 && trackIndex < tracks.length) {
audioPlayer.src = tracks[trackIndex].url;
nowPlaying.textContent = `Now Playing: ${tracks[trackIndex].title}`;
currentTrackIndex = trackIndex;
updateActivePlaylistItem();
}
}
function playPauseTrack() {
if (audioPlayer.paused || audioPlayer.ended) {
audioPlayer.play();
playPauseBtn.innerHTML = '❚❚'; // Pause Icon
} else {
audioPlayer.pause();
playPauseBtn.innerHTML = '►'; // Play Icon
}
}
function nextTrack() {
currentTrackIndex = (currentTrackIndex + 1) % tracks.length;
loadTrack(currentTrackIndex);
audioPlayer.play();
playPauseBtn.innerHTML = '❚❚';
}
function prevTrack() {
currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;
loadTrack(currentTrackIndex);
audioPlayer.play();
playPauseBtn.innerHTML = '❚❚';
}
function updatePlaylist() {
playlistDiv.innerHTML = '';
tracks.forEach((track, index) => {
const trackItem = document.createElement('div');
trackItem.textContent = `${index + 1}. ${track.title}`;
trackItem.addEventListener('click', () => {
loadTrack(index);
audioPlayer.play();
playPauseBtn.innerHTML = '❚❚';
});
playlistDiv.appendChild(trackItem);
});
updateActivePlaylistItem();
}
function updateActivePlaylistItem() {
const trackItems = playlistDiv.querySelectorAll('div');
trackItems.forEach((item, index) => {
if (index === currentTrackIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}
function seek() {
audioPlayer.currentTime = audioPlayer.duration * (progressBar.value / 100);
}
function updateProgress() {
if (audioPlayer.duration) {
progressBar.value = (audioPlayer.currentTime / audioPlayer.duration) * 100;
}
}
// Event Listeners
playPauseBtn.addEventListener('click', playPauseTrack);
nextBtn.addEventListener('click', nextTrack);
prevBtn.addEventListener('click', prevTrack);
audioPlayer.addEventListener('ended', nextTrack);
audioPlayer.addEventListener('timeupdate', updateProgress);
progressBar.addEventListener('input', seek);
// Initialize
updatePlaylist();
loadTrack(0); // Load the first track by default
});
</script>
</body>
/html
Posting Komentar untuk "Contoh Script untuk MP3 Player Menggunakan Link Direct"