How to Add a Custom HTML Audio Player For Blogger Website
Hello Friends, Let see how to add custom HTML Audio Player on the Blogger site. This Audio Player was very responsive on the all devices. Audio Player script is very useful to add Audio Files on the Your Blogger Website.
This Custom Html Audio Player Script is very helpful to the add Audio File the your Blogger Sites. The Custom Audio Player was provides the three ways on the this blog.
You are run the website on the blogger platform. Now I will show the three type of the HTML and CSS Audio/MP3 Player script for the Blogger Platform.
What is Custom HTML Audio Player?
This Custom HTML Audio Player is helps to insert Audio Files into your Website. This HTML Audio Player was play the all type audio files with helps music direct Links.
Benifits of HTML Audio Player
This HTML Music Player Script was very helpful music website and other music providing Websites.
How To Add HTML Audio Player On Your Blogger Website Step by Step Guidelines
First of all Copy the any HTML Audio Player script on the Below
Next, open your blogger Dashboard and Go to Post/Page Section.
Now Create/Open the Post and convert to HTML View
Now paste the copied scripts directly on the your post.
Next Replace the Audio URL and audio type on the HTML Audio Player Script.
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
If you're not sure how to create an audio URL, check out our How to Create an Audio Link guide
Audio Player Script 1
<div class="HTML_Audio_player">
<div class="Audio_Player_image"><img style="border-radius: 60px;" src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="player-content">
<div class="player-info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
<a class="artist" href="#">NCS SONGS</a>
</div>
<div class="k2_audio_player">
<audio controls style="width: 80%;">
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" 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; } .k2_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>
Audio Player Script 2
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</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="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" 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 Script 3
<div class="audio_Player_grid">
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/>
</audio>
</div>
</div>
<div class="HTML_Audio_player">
<div class="Audio_Player_image">
<img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" /></div>
<div class="k2_audio_info">
<a class="song-name" target="_blank" href="https://youtu.be/BWdZjZV6bEk">Kontinuum - Aware [NCS Release]</a>
</div>
<div class="k2_audio_player">
<audio controls>
<source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" 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>
Final Words
We are hope this Custom Audio Player Script for blogger was very helpful to you. If you want more information like this please follow our social media pages.
Thank You for read this Article.