LATEST >>

We Started A Facebook AutoLiker & AutoCommenter. Check Out Our EXELiker & EXECommenter...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks / Website / Website Tricks » How To Add Music With Control Bar On Blog & Website?

How To Add Music With Control Bar On Blog & Website?

How To Add Music With Control Bar On Blog & Website?

Depending on the subject matter of your blog, having music played in the background may either enhance the pleasure of reading or annoy your visitor. Imagine the agony of surfing the web in discreet, only to catch the attention of your office colleagues or parents when the music automatically blasts off in the background. Not to mention, a big music file may cause a slower page download. Nevertheless, the solution, as shall be explained later, is simple – have an option for the reader to play or stop the music.

To begin, you will need to have a music file uploaded onto a server. You can read about using Free Hosting Providing Sites. We have also a rather list of free File Hosting Services in our articles. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Upon uploading, note down the URL of the file.

If you would like to hear how the music works on your Blog, you can also use this music file which we have uploaded onto Free hosting sites (http://exeideas.t15.org/muhammadhassan/titanic.mp3) whenever you are prompted to enter the “URL Of Music File“. This file is for testing purposes only. Please do not link permanently to this file as it may be changed or deleted in due course.

Next, you would have to decide how you want the music to be played. Link for reader to click Your visitor can click the link if he wants to hear the music. A music player console with controls of the volume, on and off buttons, would give your visitors a choice on how he wants the music played. With the code stated below, the music will not play unless the visitor clicks the play button.

Features:
1.) QuickTime Video Plugin Required To Play This Music Player.
2.) Simple To Install And Easy To Use.
3.) Short Code With Cross Browsers Support.
4.) Fully Customizable Code.
5.) Awesome And Simple Player Skin.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between .
3.) Save It, Now You Are Done.

<embed type="music/quicktime" autostart="false" height="40" loop="true" playcount="2" src="URL Of Music File" width="300"/></embed>

It Will Become Like:

<embed type="music/quicktime" autostart="false" height="40" width="300" loop="true" playcount="2" src="http://exeideas.t15.org/muhammadhassan/titanic.mp3" /></embed>

This Is What You See (DEMO):

Customization:
1.) Change URL Of Music File with your music file’s URL.
2.) The Width of the example you see above is “300“. If you want it to be embedded neatly into your sidebar, the width should not be greater than the sidebar width. For example, if your sidebar width is 150px, the width of your console should be about 140px.
3.) The height would depend on your preference and space constraints. You can also change it.
4.) The autostart attribute has two options. If you choose “true“, the music will automatically play when your page is loaded. As I have mentioned earlier, this is not a good option unless you are absolutely sure all your visitors would not mind the music. The better option is to state it as “false“. If the visitor wishes to hear the music, he can click the play button to start the music.
(Note, However, that while it works fine in Internet Explorer, it may not be so in Mozilla Firefox. The default setting for IE is “false” which means the music will not play automatically. The default setting for Firefox is “true“, and when we experimented with .wma and .wav files, they automatically played even when we set the autostart to “false“. If you are working on the Mac, the default setting for both browsers is “false“.)
5.) The loop attribute indicates whether the music should stop once that particular tune ends. The common attributes are “false” or “true“. If the attribute is “false“, the music ends after it is played once. If it is “true“, the music will automatically loop and continue playing until the visitor clicks the stop button or leaves your site. For short music pieces, you may want it to repeat and choose “true“.
For certain versions of Netscape browsers, another attribute that might work is loop=”n” where n is a number. If n is 2 for example, the music will play twice and stop. The similar attribute in Internet Explorer is playcount.
6.) You can specify the number of times the music is to be played. In the above example, where playcount=”2″, the same piece of music is played twice before it stops. If you want the music to be played once, you can delete playcount altogether. Note that this only works in Internet Explorer.

Note:
It will look different in IE and Firefox, depending on the installed plugins.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>