How to add HTML Audio Player Audio Download Button in Blogger Website: Today I am going to tell you how you can install HTML Audio Player and Audio Download Button on your Blogger website.
We all know that like WordPress, we do not get the feature of direct file upload on blogger. For which we have to do this work on blogger using HTML code. But after reading this post on How to add HTML Audio Player Audio Download Button in Blogger Website, you can easily do this thing.
Today I am going to give you three such codes, using which you can install HTML Audio Player Audio Download Button on your blogger website. This code is fully responsive and works well on mobile and desktop devices.
Audio Player Audio Download Button in Blogger
✅ Audio Player Code 1
<div class="audio_Player_grid">
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="audio_info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
</div>
<div class="audio_player">
<audio controls>
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="audio_info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
</div>
<div class="audio_player">
<audio controls>
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="audio_info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
</div>
<div class="audio_player">
<audio controls>
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="audio_info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
</div>
<div class="audio_player">
<audio controls>
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
</div>
<style>
.audio_Player_grid{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.HTML_Audio_player{
Position: relative;
width:350px;
background: #faf3f4;
box-shadow: 0 50px 80px rgba(0,0,0,0.25);
margin-top: 10px;
margin-bottom: 10px;
}
.HTML_Audio_player .Audio_Player_image{
position: relative;
width:100%;
height: 350px;
}
.HTML_Audio_player .Audio_Player_image img{
position: absolute;
top:0;
bottom: 0;
width: 100%;
height:100%;
object-fit: cover;
}
.HTML_Audio_player audio {
width: 100%;
outline: none;
}
.song-name { font-size:18px;
font-weight:600;
display: flex;
justify-content: center;
margin-top: 10px;
}
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}
</style>with codes✅ Audio Player Code 2
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="audio_info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
<p style="text-align: center; padding:0px 10px 0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi
</p>
</div>
<div class="audio_player">
<audio controls>
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
<style>
.HTML_Audio_player{
Position: relative;
width:350px;
background: #faf3f4;
box-shadow: 0 50px 80px rgba(0,0,0,0.25);
}
.HTML_Audio_player .Audio_Player_image{
position: relative;
width:100%;
height: 350px;
}
.HTML_Audio_player .Audio_Player_image img{
position: absolute;
top:0;
bottom: 0;
width: 100%;
height:100%;
object-fit: cover;
}
.HTML_Audio_player audio {
width: 100%;
outline: none;
}
.song-name { font-size:18px;
font-weight:600;
display: flex;
justify-content: center;
margin-top: 10px;
}
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}
</style>✅ Audio Player Code 3
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img
style="border-radius: 60px;"
src="https://blogger.googleusercontent.com/img/a/AVvXsEiQqHBTbnQw0t9OkxrP94bF3GDz01rHOpx2vyw0o6AajA-Gm0hvgoPT17p9qXoGg1scby2o6Ome0DvyZLBbq4nQxQNXIW5fVqp-AFU_Nw7vmf6enZ17OLGgoYrdNtjx4N-zmw4eyScTuujPSsM1XtunOospZcL3yx_1o_O6U3FFkoBHu3n346H_jyUN=s1024"
/>
</div>
<div class="player-content">
<div class="player-info">
<a
class="song-name"
target="_blank"
href="https://www.youtube.com/watch?v=zF695a63RNc"
>Hold On - [Magic Music]</a
>
<a class="artist" href="#">Magic Music</a>
</div>
<div class="audio_player">
<audio controls style="width: 80%;">
<source src="" type="audio/mpeg" />
</audio>
</div>
</div>
</div>
<style>
.HTML_Audio_player { z-index:10;
background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%);
color: inherit;
min-height:120px; max-height:150px;
display:flex;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
flex-direction:row;padding: 20px 10px 20px;}
.Audio_Player_image { width:150px; display: flex; justify-content: center; }
.player-content {
flex-grow:1;
display:flex;
flex-direction:column;}
.player-info {
flex-grow:1; display:flex;
flex-direction:column;
justify-content:center;
padding-left:10px;}
.song-name { font-size:18px; font-weight:600; } .audio_player { display:flex;}
audio { flex-grow:1; height:40px; }
audio::-webkit-media-controls-play-button {
background-color: #B1D4E0;
border-radius: 50%;}
audio::-webkit-media-controls-play-button:hover {
background-color: rgba(177,212,224, .7);}
audio::-webkit-media-controls-panel {
background: #e9e8f2;}
.Audio_Player_image img:hover{animation:rotating 3s linear infinite} @keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
</style>
* For how to use these codes properly, you must watch the video given below. 👇
So I hope you must have liked this post How to add HTML Audio Player Audio Download Button in Blogger Website. If you like it, then definitely tell your opinion by commenting. If you want to ask anything about this, then comment or you can also join our Telegram Group. I will meet you guys with a new post of mine.