Friday, September 15, 2017

Add HTML5 MP3 Audio With Download Link to Blogger
By this useful tutorial I guide you that how to add HTML5 MP3 Audio Player with Play and Pause and with download button to blogger blog. HTML5 give us incredible usefulness MP3 Audio Player with play and pause button, we can use and help MP3 Music Download and other formats with easy. This is very tough task how to add MP3 Audio Player with Download link to Blogger blog or Website. I have searched and running this audio player code on my website and want to share with others who are searching such type of MP3 Audio Player for their blogs and websites. This HTML Audio Player is providing support with all browsers and you can use Google Drive MP3 Audio link with Play and Pause Button and you can add download button with some easy steps. Now I guide you step by step that how to add Play and Pause HTML5 MP3 Audio Player to Blogger. HTML5 is certain to be a major hit to the extent website architecture patterns go, and as it should be. It's new, energizing, straightforward and superior to anything that has preceded it. As of not long ago, we have needed to explore a hazy area as far as similarity and definition, and subsequently, a considerable lot of the early receptions of HTML5 have been fractional or finish disasters. The first thing to comprehend is the place HTML5 closures and CSS3 starts.
How to Add HTML5 MP3 Audio With Download Link to Blogger

HTML5 is quite recently the markup an arrangement of guidelines that characterize how a record ought to be organized and how programs ought to translate it. As opposed to all the duty regarding introduction and usefulness, HTML5 returns to fundamentals, enabling us to take advantage of APIs and local program usefulness, while looking to CSS to make the visual look and feel. At last we are left with a straight-forward and improved dialect for making sites and applications. If you have not add style sheet in your blogger blog <head> section, add the following two style sheets in blogger blog for better improvement of Audio Player.
<link href='https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>
 
How to add any MP3 song to Play and Pause with Download Button HTML 5 MP3 Audio to Blogger or Website. First go to your blogger edit HTML and search </head> and paste following jquery function code before it.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

<style type='text/css'>

.mp3Player {

padding:1px;

margin:4px;

background-color:#81BECC;

}

</style>

<script type='text/javascript'>

//<![CDATA[ 

jQuery(function (){

var myAudio = document.getElementById("myAudio");

var current = null;

var playingString = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Pause</span>";

var pausedString = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Play</span>";

$(document.body).on('click', '.btnPlayPause',function(e){

var target = this;

//console.log(target, current); //return;

if (current == target) {

target.innerHTML = pausedString;

target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused

myAudio.pause();

current = null;

} else { // current!=target

if (current != null) {

current.innerHTML = pausedString;

current.parentNode.setAttribute('data-pos', '0'); //reset position

target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused

}

current = target;

target.innerHTML = playingString;

if(myAudio.canPlayType && myAudio.canPlayType("audio/mpeg") != "") { // MP3

myAudio.src = target.parentNode.getAttribute('data-src');

} else if(myAudio.canPlayType && myAudio.canPlayType("audio/ogg") != "") {  // OGG

myAudio.src = target.parentNode.getAttribute('data-src2');

} else {

return; // no audio support

}

myAudio.play();

myAudio.onloadeddata = function () {

myAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));

};

}

});

$(document.body).on('click', '.btnMute',function(e){

myAudio.muted = !myAudio.muted;

$('.btnMute').each(function(){

if (myAudio.muted) {

this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Muted</span>";

} else {

this.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Audible</span>";

}

});

});

});

//]]>  

</script>
 
Further as per function above you have already added the above code now add following two lines before </body> section of your blogger template.

<script src='https://dl.dropboxusercontent.com/s/0zefbjw5a4mcdn1/player.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
 
Finally add the following code in blogger post body and use Play and Pause buttons.

<audio id="myAudio"></audio>
<div class="mp3Player" data-src="a.mp3" data-src2="a.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #1</span>
</div>

<div class="mp3Player" data-src="b.mp3" data-src2="b.ogg" data-pos="0">
    <button class="btnPlayPause button">►||</button>
    <button class="btnMute button">MUTE</button>
    <span class="infoLabel">Audio #2</span>
</div>
 
This tutorial is very useful for those visitors who want to add this player to blogger, for best option of MP3 Music Download with best songs which you have already added any song in this HTML5 play and pause player which play all your MP3 Music.

Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2018. Media Music Mania - All Rights Reserved.