Subscribe my YouTube channel: Click to Subscribe!

How to add HTML Audio Player Audio Download Button in Blogger Website - Satya ki Pathshala

How to add HTML Audio Player Audio Download Button in Blogger Website: आज मैं आपलोगों को बताने वाला हूँ की आप कैसे अपने ब्लॉगर वेबसाइट पर HTML Audio P
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to add HTML Audio Player Audio Download Button in Blogger Website - Satya ki Pathshala

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.

إرسال تعليق

Please don't enter any spam link in the Comment Section. All comments are reviewed by the Admin!
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.