Blogger : How to add Custom Design Audio Player ? | HTML | 2022

 Are you running your website on blogger and you want to show a customized HTML audio player with a new design in it then you have come to the right post. Through this post, I will show you how to install an audio player in a blogger post and its settings with the help of HTML code. So let's start

Hello friends welcome to Techno Khurwal. Here in this article I will show you how you can easily add a custom-designed audio player to the Blogger website.

Here for your convenience, I have shared 3 custom-designed audio players, one of which is Blogger's basic design audio player. And shared 2 different custom-designed audio players.

Here I have prepared these designs using HTML and CSS, which you can also adapt according to your website. This fast loading, look wise is also good in appearance. It is completely mobile, computer, tablet responsive. Fits perfect on every screen.

So let's first look at the basic audio player setting in blogger and how to add it.

01. Basic Audio Player Blogger 

All you need is an audio file to add this blogger basic audio player. Which you can upload to Google Drive or any other audio file hosting site and generate file link. Because as you must be aware of this, it is not possible to upload direct audio file on blogger.

Now go to the blogger dashboard, open the post in html view and paste the below html and css code in it. 

<audio controls="" mobile="yes" src=" Your Audio File Link Here "></audio>

02. Custom- Designed Audio Player 01

For this you need an image file and an audio file.

Copyright Free Music Techno Khurwal

Now go to blogger dashboard, open the post in html view wherever you want this player to appear and paste the below HTML and CSS code there.

<div class="Technokhurwal_Audio_player"> <div class="Audio_Player_image"><img src=" Your Image Code Here " style="border-radius: 60px;" /></div> <div class="player-content"> <div class="player-info"> <a class="song-name" href="#" target="_blank">Copyright Free Music</a> <a class="artist" href="https://www.technokhurwal.com">Techno Khurwal</a> </div> <div class="k2_audio_player"> <audio controls="" style="width: 80%;"> <source src="Your Audio File Link Here " type="audio/mpeg"></source> </audio> </div> </div> </div> <style> .Technokhurwal_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>

Change the text given below according to your convenience.

1. Image : Your Image Code Here
2. Song Name : Copyright Free Music
3. Artist : Techno Khurwal
4. Audio File : Your Audio File Link Here

03. Custom- Designed Audio Player 02

For this you need an image file and an audio file.

Copyright Free Music

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

<div class="TechnoKhurwal_Audio_player"> <div class="Audio_Player_image"> <img src="Your Image Code Here" /></div> <div class="k2_audio_info"> <a class="song-name" target="_blank" href="https://www.technokhurwal.com/?m=1">Copyright Free 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="k2_audio_player"> <audio controls> <source src="Your Audio File Link Here" type="audio/mpeg"/> </audio> </div> </div> <style> .TechnoKhurwal_Audio_player{ Position: relative; width:350px; background: #faf3f4; box-shadow: 0 50px 80px rgba(0,0,0,0.25); } .TechnoKhurwal_Audio_player .Audio_Player_image{ position: relative; width:100%; height: 350px; } .TechnoKhurwal_Audio_player .Audio_Player_image img{ position: absolute; top:0; bottom: 0; width: 100%; height:100%; object-fit: cover; } .TechnoKhurwal_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>

Change the text given below according to your convenience.

1. Image : Your Image Code Here
2. Audio File : Your Audio File Link Here

Conclusion

I hope this article will help you to add Custom Design Audio Player in Blogger. If still you are facing some problem then you can ask by commenting below. Don't Forget To Join us on Facebook , Twitter, Instagram ,Telegram channel. Medium, Reddit,,