Build a Music Player with HTML CSS and JavaScript | by Arhaan Ali | Medium
Sat Apr 20 2024 00:33:52 GMT+0000 (Coordinated Universal Time)
Saved by
@Chijunior
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<script defer src="js/script.js"></script>
<title>Music Player | OnlineITtuts Tutorials</title>
</head>
<body>
<div class="background">
<img src="imgs_audio/img-1.jpg" id="bg_img" />
</div>
<div class="container">
<!--===============Player Image================= -->
<div class="player_img">
<img src="imgs_audio/img-1.jpg" id="cover" class="active" />
</div>
<!--============Player Content -->
<h2 id="music_title">Capital Letters</h2>
<h3 id="musric_artist">Lorem, ipsum dolor.</h3>
<!--==============Player Progress & Timmer -->
<div class="player_progress" id="player_progress">
<div class="progress" id="progress">
<div class="music_duration">
<span id="current_time">0:00</span>
<span id="duration">0:00</span>
</div>
</div>
</div>
<!--==============Player Controllers -->
<div class="player_controls">
<i class="fa-solid fa-backward" title="Previous" id="prev"></i>
<i class="fa-solid fa-play play-button" title="Play" id="play"></i>
<i class="fa-solid fa-forward" title="Next" id="next"></i>
</div>
</div>
</body>
</html>
content_copyCOPY
https://arhaanali.medium.com/build-a-music-player-with-html-css-and-javascript-53ff3e168e1e
Comments