How to Add HTML and CSS Audio Player in Blogger | HTML5 Audio Player
Hello Friends, Welcome to AS Theme World. Today we are going to create Stylish Audio Player using HTML and CSS. Adding music player in website is very simple and very helpful to stay audience longer on webpages.
Advantages of Adding Audio Player
Adding a audio player in website, with an autoplay feature, is one of the easiest and most efficient ways to get visitors into the right mood for reading your blog. Not many blog owners have realized that by using this simple and free technique they can actually influence their audience to stay longer on their webpage, which means you will have the great advantage of being unique.
Steps to Add Audio Player
It is very simple to add audio player in Blogger post. Just follow these two simple steps:
Step 1. Adding CSS Codes
Search for the code ]]></b:skin> and paste the following CSS codes above it.
*
{
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. Adding HTML Codes
Now paste the following codes where you want to add Music Player
<!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>- Place the image and music url in the highlighted parts.
If you would like the audio to begin playback as soon as it is ready, you can enable autoplay. To enable autoplay use the code given below -
<!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>Download all source code files of Stylish Music Player Widget by clicking on download button given above.
At this point, your audio player has been completely created and working properly. If there are questions or sections that are not understood, please write down questions through the comments column provided.