Hello Guys, In this article or video we will see Amazing Audio Player Using Only HTML & CSS. You will use this Amazing Audio Player on your website freely. If you learn How to Create this Amazing Audio Player so watch my video from YouTube or bellow. And you wish to learn more amazing HTML, CSS and JavaScript Effect or Tutorial so Subscribe my YouTube Channel Pure Coding and Stay with this website.
Watch Video
--------------------
Source Code
--------------------
First add this code on HTML file:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Amazing Audio Player - Pure Coding</title>
</head>
<body>
<div class="player">
<h2 class="title">NEFFEX - Damn Gurl</h2>
<div class="image">
<img src="image.jpg" alt="Image">
</div>
<audio controls>
<source src="audio.mp3"></source>
</audio>
</div>
</body>
</html>
Then add this code on CSS file:
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;
0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,
600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #12c2e9;
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.player {
width: 350px;
}
.player h2.title {
background: rgba(0, 0, 0, .5);
color: #FFF;
padding: 10px;
border-radius: 5px 5px 0 0;
text-align: center;
}
.player .image {
width: 100%;
height: 350px;
}
.player .image img {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
pointer-events: none;
}
.player audio {
width: 100%;
}
Post a Comment