How to Add an Audio Player Widget in Blogger Blogs

If you want to offer a soothing environment to all your readers, then the one way is to embed a nice audio player with a nice soothing songs to make their day. Well if you were searching for something like embedding an audio player into your blogger blog then your search ends here, well BTW I have already posted an easy way to embed song in your blogger blog without the player you can check that too if you are getting deep with the player, but if you want to give controls to your users then here is the way to embed a nice audio tool in your blog.

I have tried to embed the audio player in this post, you might not be to scroll the song forward and backward, but this bug is not going to be there in reality, you just follow below steps and it will work fine.

Demo Song

Embedding an Audio Player in Blogger Blog

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for </head> & paste below code above it.

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="https://dl.dropboxusercontent.com/s/o0dn83pzj8s8cpk/mediaelement-and-player.min.js"></script><link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/gzlhi56sfn3tn3i/style.css" media="screen">

3. Now press the Save Template option, your CSS and JavaScript is placed securely, now its time to add the audio player HTML.
4. So you can paste the audio player HTML in any post or sidebar using the HTML/JavaScript gadget option.
5. So you can use the below code:

   <div class="audio-player">
   <div id="autocolor"></div>
   <h1>Demo Song</h1>
   <img class="cover" src="cover.jpg" alt="cover">
   <audio id="audio-player" src="file.mp3" type="audio/mp3" controls="controls"></audio>
   </div>
   <script>
   $(document).ready(function() {
   $('#audio-player').mediaelementplayer({
   alwaysShowControls: true,
   features: ['playpause','volume','progress'],
   audioVolume: 'horizontal',
   audioWidth: 200,
   audioHeight: 100
   });
   });
   </script>

6. Now you can make some changes on your own, like the song name, you can change that, add your own cover image link and your .mp3 song file link, upload it to any free host like google drive or dropbox or box.

That's it now just after adding the HTML try refreshing your blog and see your audio player in action, if you find this tutorial useful, do like and share this post, have fun and goodbye till my next post, PEACE !