HectorBlisS/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Primer proyecto</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <script defer src="index.js"></script>
</head>
<body>
    <div class="music-player">
        <img src="https://i.scdn.co/image/ab67616d00001e02ee644f4cdcfe697f7a3fc2be" alt="">
        <div class="info">
            <i class="logo fa-brands fa-spotify"></i>
           <div class="text">
                <h2 class="animation-marquee">Lean On (feat. MO & BlissMo)</h2>
                <p>Major Lazer, MO, BlissMO</p>
                <i class="fa-regular fa-heart"></i>
           </div>
           <div class="controls">
                <p class="time">-02:45</p>
                <p class="menu">...</p>
                <button class="play-button">
                    <i class="fa fa-play"></i>
                </button>
           </div>
        </div>
    </div>
</body>
</html>

## index.js
// global consts
const musicURL = 'https://cms-public-artifacts.artlist.io/content/music/aac/6192_262020_262020_Funky_Chinese_Chicken_-16-44.1-.aac';

// selectors
const audio = document.createElement('audio');
audio.src = musicURL
const button = document.querySelector('.play-button');
const timeNode = document.querySelector('.time');

// functions
function playMusic(){
    if(audio.paused) {
        button.innerHTML = `<i class="fa fa-pause"></i>`;
        audio.play()
    }else{
        button.innerHTML = `<i class="fa fa-play"></i>`;
        audio.pause()
    }
}

function onAudioChange(){
    const rest = (audio.duration - audio.currentTime)
    const min = Math.floor(rest/60)
    const sec = Math.floor(rest%60)
    timeNode.innerText =`-${min}:${sec<10 ? '0'+sec : sec}`
}

// listeners
button.onclick = playMusic
audio.ontimeupdate = onAudioChange;

## style.css
html,body {
    margin:0;
    height: 100%;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.music-player{
    width: 600px;
    height: 352px;
    overflow: hidden;
    background-color: #2a2a2a;
    display: flex;
    border-radius: 12px;
    position: relative;
}

.music-player > img{
    width: 272px;
    height: 272px;
    object-fit: cover;
    margin:40px 24px 0px 40px;
    border-radius: 12px;
}

.music-player .info {
    margin:100px 40px 0 0;
    color:white;
    font-family: sans-serif;
    overflow: hidden;
}

.info .logo{
    font-size: 32px;
    position: absolute;
    top:40px;
    right: 40px;
}

.info h2{
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info .text p{
    opacity: .6;
    font-size: 15px;
    font-weight: 300;
}
.info .text i{
    font-size: 24px;
    opacity: .6;
    padding-bottom: 44px;
}

.info .controls{
    display: flex;
    justify-content: flex-end;
    gap:16px;
    align-items: flex-end;

}

.info .controls p{
    opacity: .6;
    margin:0;
    margin-bottom: 6px;
    font-size:14px
}

.info .controls p.menu{
    opacity: .6;
    margin:0;
    margin-bottom: 8px;
    font-size:23px
}

.info .controls button{
    background-color: white;
    border:none;
    padding: 16px 22px;
    box-sizing: border-box;
    border-radius: 50%;
    font-size: 22px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@keyframes marquee{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-150%);
    }
}

.animation-marquee{
    animation-name: marquee;
    animation-timing-function: ease-out;
    animation-duration: 10s;
    animation-iteration-count: 3;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Primer proyecto</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
	<link rel="stylesheet" href="style.css">
	<script defer src="index.js"></script>
	</head>
	<body>
	<div class="music-player">
	<img src="https://i.scdn.co/image/ab67616d00001e02ee644f4cdcfe697f7a3fc2be" alt="">
	<div class="info">
	<i class="logo fa-brands fa-spotify"></i>
	<div class="text">
	<h2 class="animation-marquee">Lean On (feat. MO & BlissMo)</h2>
	<p>Major Lazer, MO, BlissMO</p>
	<i class="fa-regular fa-heart"></i>
	</div>
	<div class="controls">
	<p class="time">-02:45</p>
	<p class="menu">...</p>
	<button class="play-button">
	<i class="fa fa-play"></i>
	</button>
	</div>
	</div>
	</div>
	</body>
	</html>
	// global consts
	const musicURL = 'https://cms-public-artifacts.artlist.io/content/music/aac/6192_262020_262020_Funky_Chinese_Chicken_-16-44.1-.aac';

	// selectors
	const audio = document.createElement('audio');
	audio.src = musicURL
	const button = document.querySelector('.play-button');
	const timeNode = document.querySelector('.time');

	// functions
	function playMusic(){
	if(audio.paused) {
	button.innerHTML = `<i class="fa fa-pause"></i>`;
	audio.play()
	}else{
	button.innerHTML = `<i class="fa fa-play"></i>`;
	audio.pause()
	}
	}

	function onAudioChange(){
	const rest = (audio.duration - audio.currentTime)
	const min = Math.floor(rest/60)
	const sec = Math.floor(rest%60)
	timeNode.innerText =`-${min}:${sec<10 ? '0'+sec : sec}`
	}

	// listeners
	button.onclick = playMusic
	audio.ontimeupdate = onAudioChange;
	html,body {
	margin:0;
	height: 100%;
	}

	body{
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.music-player{
	width: 600px;
	height: 352px;
	overflow: hidden;
	background-color: #2a2a2a;
	display: flex;
	border-radius: 12px;
	position: relative;
	}

	.music-player > img{
	width: 272px;
	height: 272px;
	object-fit: cover;
	margin:40px 24px 0px 40px;
	border-radius: 12px;
	}

	.music-player .info {
	margin:100px 40px 0 0;
	color:white;
	font-family: sans-serif;
	overflow: hidden;
	}

	.info .logo{
	font-size: 32px;
	position: absolute;
	top:40px;
	right: 40px;
	}

	.info h2{
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.info .text p{
	opacity: .6;
	font-size: 15px;
	font-weight: 300;
	}
	.info .text i{
	font-size: 24px;
	opacity: .6;
	padding-bottom: 44px;
	}

	.info .controls{
	display: flex;
	justify-content: flex-end;
	gap:16px;
	align-items: flex-end;

	}

	.info .controls p{
	opacity: .6;
	margin:0;
	margin-bottom: 6px;
	font-size:14px
	}

	.info .controls p.menu{
	opacity: .6;
	margin:0;
	margin-bottom: 8px;
	font-size:23px
	}

	.info .controls button{
	background-color: white;
	border:none;
	padding: 16px 22px;
	box-sizing: border-box;
	border-radius: 50%;
	font-size: 22px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	}

	@keyframes marquee{
	0%{
	transform: translateX(100%);
	}
	100%{
	transform: translateX(-150%);
	}
	}

	.animation-marquee{
	animation-name: marquee;
	animation-timing-function: ease-out;
	animation-duration: 10s;
	animation-iteration-count: 3;
	}