HOW TO ADD LIGHT WEIGHT JQUERY MUSIC PLAYER ON YOUR BLOG ?

Hello Friends, there are many plugins and widgets in the market to add  on your blog But every widget and plugin is not unique and in quality that impress the coming visitors .The main thing is that whatever you install on your blog externally,It should not harm your blog load speed or surfing performance like pop upsI hate them. I think you understand what I am talking about.Today I will tell you about that how to add your own music player or your own podcast on your blog that belongs to you.There are also many sites which offer music player plugins but in that case the music player belongs to them
you either have to give a link to them from your site.If you are a blogger then you understands that giving away a link from your blog for free  it`s impossible and you will not give it away.So today I will tell you that how to add a light weight,impressive, your own music player to your blog  and no compromise on your blog performance  from any side.

How To Add Music Player On Your Blog ?

1:You have to paste the below coding in the html area on your blog where you want to put the music player I will prefer it in the side bar or in the footer.

<style>  .audio-player,.audio-player div,.audio-player h1,.audio-player a,.audio-player img,.audio-player span,.audio-player button {       margin: 0;       padding: 0;       border: none;       outline: none;} div.audio-player {       position: relative;       width: 400px;
       height: 120px;
   
       background: #4c4e5a;       background: -webkit-linear-gradient(top, #F55B5B 0%, #3F241D 100%);       background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);       background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);       background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);       background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);        -webkit-border-radius: 3px;       -moz-border-radius: 3px;       border-radius: 3px;} /* Title */.audio-player h1 {       position: absolute;       top: 37px;       left: 165px;        font-family: Helvetica, Arial, sans-serif;       font-weight: bold;       font-size: 14px;       color: #ececec;       text-shadow: 1px 1px 1px rgba(0,0,0, .5);} /* Cover */.audio-player .cover {       position: absolute;       top: 0;       left: 0;} /* Buttons */.mejs-controls .mejs-button button {       cursor: pointer;       display: block;       position: absolute;       text-indent: -9999px;} /* Play & Pause */.mejs-controls .mejs-play button,.mejs-controls .mejs-pause button {       width: 21px;       height: 21px;       top: 35px;       left: 135px;       background: transparent url(https://lh4.googleusercontent.com/-9hIQTZiv_7k/UOfUBAVU59I/AAAAAAAAB3M/F3NvP5qF1qs/h120/play-pause.png) 0 0;} .mejs-controls .mejs-pause button { background-position:0 -21px; } /* Mute & Unmute */.mejs-controls .mejs-mute button,.mejs-controls .mejs-unmute button {       width: 14px;       height: 12px;       top: 70px;       left: 140px;       background: transparent url(https://lh4.googleusercontent.com/-lfEbfRSj-YQ/UOfUK6BBo-I/AAAAAAAAB3Y/deTqYpgMEO0/h120/mute-unmute.png) 0 0;} .mejs-controls .mejs-unmute button { background-position: 0 -12px; } /* Volume Slider */.mejs-controls div.mejs-horizontal-volume-slider {       position: absolute;       top: 71px;       left: 165px;       cursor: pointer;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {       width: 200px;       height: 8px;       background: #212227;        -webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);       -moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);       box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);        -webkit-border-radius: 6px;       -moz-border-radius: 6px;       border-radius: 6px;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {       position: absolute;       width: 0;       height: 6px;       top: 1px;       left: 1px;       background: url(https://lh4.googleusercontent.com/--CLZ-azpVMI/UOfULnyKxKI/AAAAAAAAB3g/c_Gaku-lrFM/h120/volume-bar.png) repeat-x;        -webkit-border-radius: 6px;       -moz-border-radius: 6px;       border-radius: 6px;} /* Progress Slider */.mejs-controls div.mejs-time-rail { width: 400px; } .mejs-controls .mejs-time-rail span {       position: absolute;       display: block;       width: 400px;       height: 5px;       left: 0;       bottom: 0;       cursor: pointer;   
       -webkit-border-radius: 0px 0px 2px 2px;       -moz-border-radius: 0px 0px 2px 2px;       border-radius: 0px 0px 2px 2px;} .mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; } .mejs-controls .mejs-time-rail .mejs-time-loaded {       width: 0;       background: #cccccc;} .mejs-controls .mejs-time-rail .mejs-time-current {       width: 0;       background: #64b44c;} /* Volume Slider & Progress Bar Handle */.mejs-controls .mejs-time-rail .mejs-time-handle,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {       position: absolute;       display: block;       width: 12px;       height: 14px;       top: -4px;       background: url(https://lh3.googleusercontent.com/-YAJ8fC-GFnw/UOfUK2O810I/AAAAAAAAB3U/2O4BE-PFfUI/h120/handle.png) no-repeat;} .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; } /* Time Float Box */.mejs-controls .mejs-time-rail .mejs-time-float {       position: absolute;       display: none;       width: 33px;       height: 23px;       top: -26px;       margin-left: -17px;       background: url(https://lh5.googleusercontent.com/-kkXdzU3xihc/UOfUK1IKFNI/AAAAAAAAB3c/71gFaJ0eoDY/h120/time-box.png);} .mejs-controls .mejs-time-rail .mejs-time-float-current {       width: 33px;       display: block;       left: 0;       top: 4px;        font-family: Helvetica, Arial, sans-serif;       font-size: 10px;       font-weight: bold;       color: #666666;       text-align: center;}/*Designed by www.blogging-heaven.com*/</style><!DOCTYPE html>   <html lang="en"> <head>          <!-- Audio Player CSS & Scripts -->       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>       <script src="http://musicpolayer.googlecode.com/files/mediaelement-and-player.min.js"></script>       <link rel="stylesheet" href="css/style.css" media="screen">       <!-- end Audio Player CSS & Scripts -->   <body>        <!-- Audio Player HTML -->       <div class="audio-player"><h1>Demo - Preview Song</h1>              <img class="cover" src="https://lh3.googleusercontent.com/-F8xf_SYbj7I/UOfIhWYeqRI/AAAAAAAAB2Y/I18dpap3EII/h120/ZJ017-110x114.gif" alt="">              <audio id="audio-player" src="http://www.sounddogs.com/previews/3671/mp3/561249_SOUNDDOGS__19.mp3" type="audio/mp3" controls="controls"></audio>       </div>        <script>              $(document).ready(function() {                     $('#audio-player').mediaelementplayer({                           alwaysShowControls: true,                           features: ['playpause','volume','progress'],                           audioVolume: 'horizontal',                           audioWidth: 400,                           audioHeight: 120                     });              });       </script>       <!-- end Audio Player HTML --> </body> </html>

Customization

. Change Red colour line with the width you want set it according to your needs.

. Change Purple colour with the height you want set it according to your needs.

. Change the Sky Blue colour with the direct mp3 link from any mp3 hosting site you want to play.

. Change the Orange colour line with the title you want to show on the music player as in the image.

. Change the Blue colour line with the link to a direct image for the side cover like in the image      110 x 114  fits best in it.

From The Author`s Desk  > > >

I can surely  say that this music player will enhance your blog beauty and exposure as well.In future I will try to come up with something new unique and elegant till then stay blessed and happy playing ..!