How to add a stylish html5 audio player on blogger

Sometimes you may need to add an audio player to your blogger blog. So if you add the audio player by using a normal html5 audio player then you will see it does not look so great.

If you use the normal html5 audio player then you can't able to styling the player using CSS. Html5 audio player only supports only width, height and outline CSS.

But in this article, you will learn how you can add a stylish html5 audio player on google blogger. If you want to see the design of the audio player then you see it from the below demo button.

Demo

I am designing this using HTML and CSS. I am adding here an image it's used as a thumbnail of the audio player and on the audio player, you got a download option like a normal html5 audio player.

I am using here normal html5 audio player

Let's talk about some benefits of this audio player

Now I am telling you some highlighted features of this stylish html5 audio player. See the below list:

• You can show the thumbnail of the audio.
• It makes your blog post looks more professional.
• You can add here this audio player with full width (to cover the full area).

How to add

For adding this audio player to your blogger blog follow all the below steps one by one:

Step1: Open your blogger dashboard then click on the theme section, now go to the HTML editor of your theme. Search for ]]></b:skin> then add the below CSS code after this tag

.playerx{
    position: relative;
    width: 100%;
    background: #f1f3f4;
    box-shadow: 0 50px 80px rgba(0,0,0,0.25);
}
.playerx .imgapx{
    position: relative;
    width: 100%;
    height: 350px;
}
.playerx .imgapx img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.playerx audio{
    width: 100%;
    outline: none;
}

Now save your theme.

Step2: Now copy the below HTML code and paste where you want to place the audio player.

<div class="playerx">
        <div class="imgapx">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Z5JzXJBIvvXnWK0WgY682v93Wbi4_-U0enDsVHWx82q4UkVmK2P02CtM7ZjHwtjSGerAt9FFF8ynxzAH4OOf06ljS10ODumVtL9VPSKZr3Is_Uw-qpBba9sGdWeNDW67V6UW2VyuFRU/s0/pexels-photo-894156.jpgp" alt="">
        </div>
       <audio controls>
           <source src="https://www.w3schools.com/html/horse.ogg" type="audio/mp3">
       </audio>
    </div>

Step3: Now change the marked URL with your audio image and audio source then publish your article and see.

Final Word

Bro that it's for today. I hope you understand how to add a stylish html5 audio player on blogger. Thanks for reading our article.