Blogger mei HTML aur CSS se Audio Player kaise Jode | HTML 5 Audio Player
Hello friends, Tech Aadi mei aapka swagat hai. Aur aaj hum HTML aur CSS ka upyog karke Stylish Audio player banane ja rahe hai. Webpage par audience ko lambe samay tak banaye rakhne ke liye website mei music player jodna bahot hi saral aur helpful hota hai.
Audio player jodne ke fayde
Website mei ek autoplay feature ke sath ek audio player jodna, aapke blog ko padhne ke liye visitors ko sahi mood mei lane ke liye sabse easy and sabse accha tarika mei se ek hai. Bohot se blog k owners ne ye mehsus nahi kiya hai ke is easy and free technique ka use kar kr wo actually mei apne audience ko influence kar sakte hai apne webpage par lambe samay tak rehne ke liye, jiska meaning hai ke aapko unique hone ka bahot faida milega.
Audio Player ko ADD karne ka Steps
Audio player jodna bahot easy hai. Bas neeche diye gaye in 2 steps ko follow kare:
Step 1.CSS Codes ko ADD karna
Apne template ke edit html mei jake aap ye code ko khoje]]></b:skin>uske baad neeche diye gaye CSS code ko copy kar ke paste kar de is code k upar]]></b:skin>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.player
{
position: relative;
width: 320px;
background: #f1f3f4;
box-shadow: 4px 3px 13px -4px rgba(0,0,0,0.4);
}
.player .imgBx
{
position: relative;
width: 100%;
height: 320px;
}
.player .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 12px;
object-fit: cover;
}
.player audio
{
width: 100%;
outline: none;
}Step 2.HTML Codes ko ADD karna
Ab neeche diye gaye html code ko waha paste kijiye jaha aapko Music Player ko add karna hai
<!doctype html>
<html>
<head>
<title>HTML CSS Audio Player</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="player">
<div class="imgBx">
<img src="image_url_here">
</div>
<audio controls>
<source src="Audio_url_here" type="audio/mp3">
</audio>
</div>
</body>
</html>- Highlighted Image aur Music URL ko change kar le apne hisab se.
Agar aap chahte hai ke audio tayyar hote hi play ho jae, to aapko autoplay enable karna hoga. Autoplay enable karne ke liye neeche diye gaye code ki madad le :-
<!doctype html>
<html>
<head>
<title>HTML CSS Audio Player</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="player">
<div class="imgBx">
<img src="image_url_here">
</div>
<audio controls autoplay>
<source src="Audio_url_here" type="audio/mp3">
</audio>
</div>
</body>
</html>Upar diye gaye download button par click karke Stylish Music Player Widget ke sabhi source code files ko download kare.
Is samay par, aapka audio player puri terah se ban gaya hai aur theek se kaam kar raha hoga. Agar koi questions or sections hai jo samaj mei nahi aaya hai, to kripya neeche diye gaye comments section mei apne questions likhe.
Post Reference
Reference:
asthemesworld.xyz
Post a Comment