<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pemutar Musik Walkman</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #222;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
}
.player-container {
width: 90%;
max-width: 350px;
padding: 20px;
background: linear-gradient(135deg, #4A90E2, #000);
border-radius: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 5px solid;
animation: borderAnimation 5s infinite linear;
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes borderAnimation {
0% { border-color: red; }
25% { border-color: yellow; }
50% { border-color: green; }
75% { border-color: blue; }
100% { border-color: red; }
}
.screen {
background: black;
color: #0f0;
padding: 15px;
font-family: 'Courier New', monospace;
border-radius: 10px;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
#playButton {
background: #f39c12;
color: white;
border: none;
padding: 12px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease;
}
#playButton:hover {
background: #e67e22;
}
.countdown {
margin-top: 10px;
font-size: 14px;
color: #ffeb3b;
}
/* Media Query untuk layar kecil */
@media (max-width: 480px) {
body {
padding: 10px;
}
.player-container {
width: 100%;
padding: 15px;
}
#playButton {
font-size: 16px;
padding: 10px 15px;
}
}
</style>
</head>
<body>
<div class="player-container">
<h2>Pemutar Musik Walkman</h2>
<div class="screen">
<p id="currentSongInfo"></p>
<p id="nextSongInfo"></p>
<p id="countdown" class="countdown"></p>
</div>
<button id="playButton">▶ Putar Musik</button>
</div>
<audio id="music">
<source id="audioSource" src="" type="audio/mpeg">
Browser Anda tidak mendukung tag audio.
</audio>
<script>
document.addEventListener("DOMContentLoaded", function() {
var audio = document.getElementById("music");
var source = document.getElementById("audioSource");
var playButton = document.getElementById("playButton");
var currentSongInfo = document.getElementById("currentSongInfo");
var nextSongInfo = document.getElementById("nextSongInfo");
var countdownElement = document.getElementById("countdown");
var countdownInterval;
var songList = [
{ file: "kosong.mp3", duration: 45800 },
{ file: "lagu1.mp3", duration: 286 },
{ file: "lagu2.mp3", duration: 364 },
{ file: "lagu3.m4a", duration: 259 },
{ file: "lagu4.mp3", duration: 326 },
{ file: "lagu5.mp3", duration: 238 },
];
function formatTime(seconds) {
let minutes = Math.floor(seconds / 60);
let secs = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
function getCurrentSong() {
let now = new Date();
let secondsSinceMidnight = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
let elapsed = 0;
for (let i = 0; i < songList.length; i++) {
let startTime = elapsed;
elapsed += songList[i].duration;
let endTime = elapsed;
if (secondsSinceMidnight < elapsed) {
let nextSong = (i + 1 < songList.length) ? songList[i + 1].file.replace('.mp3', '') : "Tidak ada lagu selanjutnya";
return {
index: i,
seekTime: songList[i].duration - (elapsed - secondsSinceMidnight),
currentSong: songList[i].file.replace('.mp3', ''),
duration: songList[i].duration,
nextSong: nextSong
};
}
}
return { index: 0, seekTime: 0, currentSong: "", duration: 0, nextSong: "" };
}
function startCountdown(duration) {
clearInterval(countdownInterval);
let timeLeft = duration;
countdownElement.textContent = `Lagu berikutnya dalam: ${formatTime(timeLeft)}`;
countdownInterval = setInterval(() => {
timeLeft--;
countdownElement.textContent = `Lagu berikutnya dalam: ${formatTime(timeLeft)}`;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
countdownElement.textContent = "Memutar lagu selanjutnya...";
}
}, 1000);
}
function playMusic() {
function updateSong() {
let { index, seekTime, currentSong, duration, nextSong } = getCurrentSong();
currentSongInfo.textContent = `Sedang diputar: ${currentSong}`;
nextSongInfo.textContent = `Lagu selanjutnya: ${nextSong}`;
if (index < songList.length) {
source.src = songList[index].file;
audio.load();
audio.currentTime = seekTime;
audio.play().catch(error => console.log("Pemutaran gagal", error));
startCountdown(duration - seekTime);
setTimeout(updateSong, (duration - seekTime) * 1000);
}
}
updateSong();
}
audio.addEventListener("pause", function() {
this.play();
});
playButton.addEventListener("click", function() {
playMusic();
playButton.style.display = "none";
});
});
</script>
</body>
</html>
ATAU INI:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pemutar Musik Walkman</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #222;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 20px;
}
.player-container {
width: 90%;
max-width: 350px;
padding: 20px;
background: linear-gradient(135deg, #4A90E2, #000);
border-radius: 20px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
border: 5px solid;
animation: borderAnimation 5s infinite linear;
display: flex;
flex-direction: column;
align-items: center;
}
@keyframes borderAnimation {
0% { border-color: red; }
25% { border-color: yellow; }
50% { border-color: green; }
75% { border-color: blue; }
100% { border-color: red; }
}
.screen {
background: black;
color: #0f0;
padding: 15px;
font-family: 'Courier New', monospace;
border-radius: 10px;
margin-bottom: 15px;
width: 100%;
text-align: center;
}
#playButton {
background: #f39c12;
color: white;
border: none;
padding: 12px 20px;
font-size: 18px;
cursor: pointer;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
transition: background 0.3s ease;
}
#playButton:hover {
background: #e67e22;
}
.countdown {
margin-top: 10px;
font-size: 14px;
color: #ffeb3b;
}
/* Media Query untuk layar kecil */
@media (max-width: 480px) {
body {
padding: 10px;
}
.player-container {
width: 100%;
padding: 15px;
}
#playButton {
font-size: 16px;
padding: 10px 15px;
}
}
</style>
</head>
<body>
<div class="player-container">
<h2>Pemutar Musik Walkman</h2>
<div class="screen">
<p id="currentSongInfo"></p>
<p id="nextSongInfo"></p>
<p id="countdown" class="countdown"></p>
</div>
<button id="playButton">▶ Putar Musik</button>
</div>
<audio id="music">
<source id="audioSource" src="" type="audio/mpeg">
Browser Anda tidak mendukung tag audio.
</audio>
<script>
document.addEventListener("DOMContentLoaded", function() {
var audio = document.getElementById("music");
var source = document.getElementById("audioSource");
var playButton = document.getElementById("playButton");
var currentSongInfo = document.getElementById("currentSongInfo");
var nextSongInfo = document.getElementById("nextSongInfo");
var countdownElement = document.getElementById("countdown");
var countdownInterval;
var songList = [
{ file: "kosong.mp3", duration: 42700 },
{ file: "lagu1.mp3", duration: 286 },
{ file: "lagu2.mp3", duration: 364 },
{ file: "lagu3.m4a", duration: 259 },
{ file: "lagu4.mp3", duration: 326 },
{ file: "lagu5.mp3", duration: 238 },
{ file: "kosong.mp3", duration: 142500 },
];
function formatTime(seconds) {
let minutes = Math.floor(seconds / 60);
let secs = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
function getCurrentSong() {
let now = new Date();
let secondsSinceMidnight = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds();
let elapsed = 0;
for (let i = 0; i < songList.length; i++) {
let startTime = elapsed;
elapsed += songList[i].duration;
let endTime = elapsed;
if (secondsSinceMidnight < elapsed) {
let nextSong = (i + 1 < songList.length) ? songList[i + 1].file.replace('.mp3', '') : "Tidak ada lagu selanjutnya";
return {
index: i,
seekTime: songList[i].duration - (elapsed - secondsSinceMidnight),
currentSong: songList[i].file.replace('.mp3', ''),
duration: songList[i].duration,
nextSong: nextSong
};
}
}
return { index: 0, seekTime: 0, currentSong: "", duration: 0, nextSong: "" };
}
function startCountdown(duration) {
clearInterval(countdownInterval);
let timeLeft = duration;
countdownElement.textContent = `Lagu berikutnya dalam: ${formatTime(timeLeft)}`;
countdownInterval = setInterval(() => {
timeLeft--;
countdownElement.textContent = `Lagu berikutnya dalam: ${formatTime(timeLeft)}`;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
countdownElement.textContent = "Memutar lagu selanjutnya...";
}
}, 1000);
}
function playMusic() {
function updateSong() {
let { index, seekTime, currentSong, duration, nextSong } = getCurrentSong();
currentSongInfo.textContent = `Sedang diputar: ${currentSong}`;
nextSongInfo.textContent = `Lagu selanjutnya: ${nextSong}`;
if (index < songList.length) {
source.src = songList[index].file;
audio.load();
audio.currentTime = seekTime;
audio.play().catch(error => console.log("Pemutaran gagal", error));
startCountdown(duration - seekTime);
setTimeout(updateSong, (duration - seekTime) * 1000);
}
}
updateSong();
}
audio.addEventListener("pause", function() {
this.play();
});
playButton.addEventListener("click", function() {
playMusic();
playButton.style.display = "none";
});
});
</script>
</body>
</html>