html {
 font-size: 14px;
}

body {
 font-family: Myriad Set Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: white;
 margin: 0;
 padding: 0;
}

.mediaplayer {
 background: linear-gradient(left, #46230f 0%, #46230f 22%, #4b1e14 25%, #4b1e14 47%, #4e2319 50%, #4e2319 72%, #552d1e 75%, #552d1e 100%);
 background-size: 50%;
 background-repeat: repeat;
 box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
 width: auto;
 max-width: 600px;
 height: auto;
 display: flex;
 flex-direction: row;
 padding: 20px;
 box-sizing: border-box;
 border-radius: 100px;
}

@media (max-width: 450px) {
 .mediaplayer {
 flex-direction: column;
 border-radius: 50px;
 }
}
audio {
 width: 0;
 height: 0;
 position: absolute;
 left: -99999px;
}

.discarea {
 margin: 10px;
}

@media (max-width: 450px) {
 .discarea {
 margin: 10px auto;
 }

 .disc {
 margin-left: 40px;
 }
}
@-webkit-keyframes spinDisc {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}
@keyframes spinDisc {
 from {
 transform: rotate(0deg);
 }
 to {
 transform: rotate(360deg);
 }
}
.disc {
 position: relative;
 display: block;
 float: left;
 width: 110px;
 height: 110px;
 background-color: #E0BF57;
 border-radius: 50%;
}

.mediaplayer.play .disc {
 -webkit-animation: spinDisc 2s linear 0.3s infinite forwards;
 animation: spinDisc 2s linear 0.3s infinite forwards;
}

.disc::before,
.disc::after {
 content: " ";
 position: absolute;
 border-radius: 50%;
}

.disc::before {
 background-color: #C43D40;
 top: 32.5%;
 left: 32.5%;
 width: 35%;
 height: 35%;
 z-index: 2;
}

.disc::after {
 position: absolute;
 top: 5%;
 left: 5%;
 width: 90%;
 height: 90%;
 background-color: #222;
 background: linear-gradient(#222, #222, #444, #222, #222);
 border-radius: 50%;
 z-index: 1;
}

.stylus {
 position: relative;
 display: block;
 float: left;
 width: 30px;
 height: 100px;
 margin-left: 5px;
 transform-origin: 15px 15px;
 transition: transform 0.3s ease-in-out;
}

.mediaplayer.play .stylus {
 transform: rotate(34deg);
}

.pivot {
 position: absolute;
 width: 30px;
 height: 30px;
 background-color: #69727B;
 border-radius: 50%;
}

.arm {
 position: absolute;
 width: 5px;
 height: 70px;
 background-color: #8B949D;
 top: 10px;
 left: 13px;
 border-top-right-radius: 2px;
 border-top-left-radius: 2px;
}

.arm::before {
 content: " ";
 position: absolute;
 border-radius: 50%;
 background-color: #ACB6BF;
 top: 0px;
 left: -2.5px;
 width: 10px;
 height: 10px;
}

.head {
 position: absolute;
 width: 8px;
 height: 15px;
 background-color: #69727B;
 top: 76px;
 left: 13px;
 border-radius: 3px;
 transform-origin: 50% 0;
 transform: rotate(30deg);
}

.controls {
 margin: 10px;
 display: flex;
 flex-direction: column;
}

.title {
 display: block;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 width: 85%;
 box-sizing: border-box;
 padding: 3px 0 3px 10px;
 font-size: 1rem;
 color: #7F3A2B;
 background-color: beige;
 border-radius: 25px;
 border: rgba(245, 245, 70, 0.4) 1px solid;
 overflow: hidden;
}

@media (max-width: 450px) {
 .title {
 width: 100%;
 text-align: center;
 }
}
.buttons {
 margin: 10px 0;
 display: flex;
 flex-direction: row;
}

.buttons button {
 width: 50px;
 height: 50px;
 text-align: center;
 border-radius: 50%;
 border: none;
 margin-right: 5px;
 background-color: #69727B;
 color: white;
 outline: 0;
 font-size: 1.2rem;
 border-top: #bbc 2px solid;
 border-left: #ccd 2px solid;
 border-right: #aab 2px solid;
 border-bottom: #bbc 2px solid;
}

.buttons button:hover {
 cursor: pointer;
}

.buttons button i::before {
 text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
 transition: text-shadow 0.3s ease;
}

.buttons button:hover i::before {
 text-shadow: 0 0 20px white;
}

.mediaplayer.play .playstate {
 background-color: #C63C3C;
}

.playstate .fa-pause,
.mediaplayer.play .playstate .fa-play {
 display: none;
}

.mediaplayer.play .fa-pause {
 display: block;
}

@media (max-width: 450px) {
 .buttons button {
 margin: 0 5px;
 }
}
.subControls {
 display: flex;
 flex-direction: row;
}

@media (max-width: 450px) {
 .subControls {
 flex-direction: row nowrap;
 justify-content: space-around;
 margin-bottom: 20px;
 }
}
.duration {
 width: 110px;
 text-align: center;
 box-sizing: border-box;
 padding: 3px 10px;
 font-size: 1rem;
 color: #7F3A2B;
 background-color: beige;
 border-radius: 25px;
 border: rgba(245, 245, 70, 0.4) 1px solid;
 margin-right: 10px;
}

.volumeSlider {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 width: 80px;
 background: transparent;
}

.volumeSlider:focus {
 outline: none;
}

.volumeSlider::-webkit-slider-thumb {
 -webkit-appearance: none;
 height: 20px;
 width: 20px;
 border-radius: 50%;
 background-color: #69727B;
 cursor: pointer;
 margin-top: -6px;
 border-top: #bbc 2px solid;
 border-left: #ccd 2px solid;
 border-right: #aab 2px solid;
 border-bottom: #bbc 2px solid;
}

.volumeSlider::-webkit-slider-thumb:active {
 background-color: #9aa;
}

.volumeSlider::-moz-range-thumb {
 height: 20px;
 width: 20px;
 border-radius: 50%;
 background-color: #69727B;
 cursor: pointer;
 margin-top: -6px;
 border-top: #bbc 2px solid;
 border-left: #ccd 2px solid;
 border-right: #aab 2px solid;
 border-bottom: #bbc 2px solid;
}

.volumeSlider::-webkit-slider-runnable-track {
 width: 100%;
 height: 8px;
 cursor: pointer;
 background-color: #8B949D;
 border-radius: 4px;
 margin-top: 2px;
}

.volumeSlider::-webkit-slider-runnable-track:active {
 background-color: #69727B;
}

.volumeSlider::-moz-range-track {
 width: 100%;
 height: 8px;
 cursor: pointer;
 background-color: #8B949D;
 border-radius: 4px;
 margin-top: 2px;
}

var songs = [
{
  title: "티키타카 - 은가은",
  songURL: "https://blog.kakaocdn.net/dn/ezG5Jy/btsvOBn0NsE/CQpTK1kKmlnSHd5Qy2sA4k/tfile.mp3" },

{
  title: "콩깍지 - 홍지윤",
  songURL: "https://blog.kakaocdn.net/dn/DN9bT/btsvoYL7wOB/Z6TXEK3KWRaPKXedWmmpI0/tfile.mp3" },

{
  title: "카사노바 - 우림",
  songURL: "https://blog.kakaocdn.net/dn/crD99V/btsvMLScAAj/hxluh4Tzf3iTnhUAb5K2j0/tfile.mp3" }];
  
const playerArea = document.getElementById("mediaPlayer");
const playButton = document.getElementById("playState");
const stopButton = document.getElementById("stopItem");
const nextButton = document.getElementById("nextItem");
const prevButton = document.getElementById("backItem");
const durationLabel = document.getElementById("currentDuration");
const songTitleLabel = document.getElementById("songTitleLabel");
const audioPlayer = document.getElementById("audioPlayer");
const volumeSlider = document.getElementById("volumeSlider");
let currentIndex = 0;
let dataAvailable = false;
let currentLength;
let timer;
timer = setInterval(updateDurationLabel, 100);
volumeSlider.addEventListener("input", () => {
 audioPlayer.volume = parseFloat(volumeSlider.value);
}, false);
playButton.addEventListener("click", () => {
 playerArea.classList.toggle("play");
 if (audioPlayer.paused) {
 setTimeout(() => {audioPlayer.play();}, 300);
 timer = setInterval(updateDurationLabel, 100);
 } else {
 audioPlayer.pause();
 clearInterval(timer);
 }
}, false);
stopButton.addEventListener("click", () => {
 playerArea.classList.remove("play");
 audioPlayer.pause();
 audioPlayer.currentTime = 0;
 updateDurationLabel();
}, false);
nextButton.addEventListener("click", () => {
 playerArea.classList.add("play");
 dataAvailable = false;
 loadNext(true);
}, false);
prevButton.addEventListener("click", () => {
 playerArea.classList.add("play");
 dataAvailable = false;
 loadNext(false);
}, false);
audioPlayer.addEventListener("loadeddata", () => {
 dataAvailable = true;
 currentLength = audioPlayer.duration;
});

function parseTime(time) {
 const minutes = Math.floor(time / 60);
 const seconds = Math.floor(time - minutes * 60);
 const secondsZero = seconds < 10 ? "0" : "";
 const minutesZero = minutes < 10 ? "0" : "";
 return minutesZero + minutes.toString() + ":" + secondsZero + seconds.toString();
}
function loadNext(next) {
 audioPlayer.pause();
 if (next) {
 currentIndex = (currentIndex + 1) % songs.length;
 } else {
 currentIndex = currentIndex - 1 < 0 ? songs.length - 1 : currentIndex - 1;
 }
 audioPlayer.src = songs[currentIndex].songURL;
 songTitleLabel.innerHTML = songs[currentIndex].title;
 audioPlayer.play();
}
function updateDurationLabel() {
 if (dataAvailable) {
 durationLabel.innerText = parseTime(audioPlayer.currentTime) + " / " + parseTime(currentLength);
 } else {
 durationLabel.innerText = parseTime(audioPlayer.currentTime);
 }
}
audioPlayer.addEventListener("ended", () => {
 audioPlayer.currentTime = 0;
 playerArea.classList.remove("play");
 loadNext(true); // Automatically load the next song
});
audioPlayer.addEventListener("playing", () => {
  playerArea.classList.add("play");
});