How To Add Premium Quality MP3 Player On Blogger

Hello Guys Welcome To SK PROJECT HIVE BLOG.

If You Have Audio Music/Music Download Website And You Don't Know How To Create A Premium Looking Mp3 Player So Don't Worry Jast Fllow My Steps...

Features On Player

Song Banner/Thumbnail
Song Name
Song Original Video Link
Music Control
Playback Speed
Download Song
Woner Link

Upload Your Music

1st You Need To Upload Your Audio Music On Google Drive And Make Sure Your Song Link Visible Type Is Any One If Not Then Edit Your Link.

Create Direct Download Link

Now Copy Your Music Link And Create It Direct Download Link. You Go This Website And Paste Your Original Link And Get Your Direct Download Link Or You Can Jast Simply Replace Your Music ID To Mine.

Add Code To Post/Page

Now Create Your Post/Page And Select Type Format HTML And Paste This Code

<div class="HTML_Audio_player">

  <div class="Audio_Player_image">

    <img

      src="BANNER_OR_THUMNAIL_LINK_HERE"

    />

  </div>

  <div class="audio_info">

    <a

      class="song-name"

      target="_blank"

      href="ORIGINAL_SONG_LINK_HERE"

      >SONG_NAME_HERE</a

    >

    <p style="text-align: center; padding:0px 10px 0px;">

SONG_DESCRIPTION_HERE

    </p>

  </div>

  <div class="audio_player">

    <audio controls>

      <source src="https://drive.google.com/uc?export=YOUR_SONG_ID_OR_DIRECT_DOWNLOAD_LINK" 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>

Now Make Sure You Change Your Song Details To Mark Text.

After Change Your Details Now Publish You Page Or Post Congratulations 👏🎉 . You Jast Created A New MP3/AUDIO Player.

Demo

What Can Do Visitors

Now Visitors Can Play Your Published Song And More Think Like Audio Controls/Mute, Change Play Back Speed And The Most Cool Feature Is Visitors Can Download The Song Easyly , Visitors Can Go Original Song Also They Can Find Publisher .

SK PROJECT HIVE BLOG