Hi, Did you ever think to add music on youe site/blog? then you just stuck on a point that what to do who dont want it. So here we have solution for both. From here you can add background music to your blog or site without having any player embed and play it automatically but here is also a button for visitor who dont want this, they can stop the music with just on click and the code will run thriugh javascript not jquery so its mean that your page time will be alos down.
So how about Playing your favorite music when your reader get load your blog? That would be nice,right ? Surfing your blog with Music would be a nice experience to your visitors. Or if you own personal blog ,then piano musics and notes would make more attractiveness to your blog.
So, you’ve decided to add music to your website! Good. You’ve come to the right place. Here we have a best code for you which require very little knowledge of HTML and very few lines of code. Al modern browsers will play it. And also awesome in runninf, When the sound will playong, the button will keep showing sound icon but when user click on it and make it pause then user will see the pause icon on that button so is not awesome thins. Now without any more prefacem just go to the features list and see what it has and dont forget to see the live demo before getting the code. Then get the code and stylify your blog.
Table of Contents
Know About New <audio”> In HTML5:
Its a new tag that has a lot of features and good in responce in HTML5. before moving forward, just know about this tag. The <audio> tag is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.(Internet Explorer 8 and earlier versions, do not support the <audio> tag.) .There are 3 supported file formats for the <audio> element: MP3, Wav, and Ogg. See the rest at HTML5 <audio”> Tag At w3Schools
Features:
1.) Add Backgrounf Must To Your WebPage.
2.) <audio> Tag Is New In HTML 5.
3.) Sound Will Be Playiong On Page Load.
4.) You Visitor Can Pause It Via Click.
5.) He Can Also Resume In On Click.
6.) Click Will Be Occurs On A Specfic Image.
7.) On Play/Pause, Image Will Also Change In Play/Pause Icon.
8.) Pure JavaScript And HTML5.
9.) Free To Add Any CSS Extra.
10.) Awesome In Look And Work.
11.) SEO Optimized.
12.) Will Not Make Your Page Heavy.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search </body> Code.
7.) Now Copy The Below Code And Paste It Before </body> Code..
8.) Click “Save Template” And Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) Save It, Now You Are Done.
<script type="text/javascript">
// Background Sound Play/Pause Script:
// Description: Background Music Will Be On Via Click And And Will Be Off On Other Click With Image Change Also By Pure JavaScript.
// Copyright EXEIdeas International 2013. All Right Reserved.
function playpause() { var snd = document.getElementById("sound"); var snd_btn = document.getElementById("sound_button"); snd.muted = !snd.muted; if(snd.muted){ snd_btn.innerHTML = "<img alt='Pause The Music' title='Music Paused' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/30_Sound_off-24.png' />"; } else{ snd_btn.innerHTML = "<img alt='Play The Music' title='Music Palying' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/29_Sound_alt-24.png' />"; } }
</script>
<audio autoplay="true" loop="true" width="0" height="0" id="sound" src="http://exeideas.t15.org/muhammadhassan/titanic.mp3" type="audio/mp3" ></audio>
<noembed><bgsound src="music.mp3" loop="infinite"/></noembed>
Now add the below code where you want to show your on/off background button.
<div id='sound_button' onClick="playpause()" ><img title='Music Playing' alt='Play The Music' src='https://cdn3.iconfinder.com/data/icons/eightyshades/512/29_Sound_alt-24.png' /></div>
Customization:
1.) Change The Music Link With .mp3 File Of Your Own.
2.) Change The Images Link If You Want To Show Something Else To Your Visitor. (These Images Are From CDN, So We Suggest Not To Change)
3.) Save And Done.
From Generator Desk:
This script is generated by us so keep or copyright while using. If you have any more quires then feel free to ask otherwise leavea good comment so new comers can get help from there. Dont forget to share and bookmark us for tyhe next upcomming code.
This is surely a nice widget to entertain our blog reader while they are browsing the site
Regards.
TechTrickHome
Welcome Here And Tanks For Liking It. Be With Us To Get More LIke This…
I found everything perfect here
Welcome Here And Thanks For Trying The Codes…
This comment has been removed by the author.
Its A Pure JavaScript Code And Not Touching Or Using Your User Cookies So It Doesn’t Have That Feature. Stay With US So We Will Share Your Requirement Too In Future…
Why this just works in Mozilla Firefox browser? Does not work in Chrome browser or Internet Explorer. Any idea how to fix that?
Its working everywhere. Can you share where you add this so we will check ourself…