How To Add Music to Blog And Website

Background music has a cool effect on the visitors of your blog or websites. It may help you in catching the attention of your visitors, that is what needed by every blogger or web designer or developer. We will describe here different methods of embedding background music but before them there are some important points that should be remembered.

Background music not only enhances the reading pleasure but may also annoy the reader, if the music played is opposite or irrelevant to the matter of blog or website. It may also increase the page loading time if too big music file is used, so kindly avoid too much heavy file and please also provide play stop option for the visitor, helping him to stay on the page.

The first thing you need to start this is a music file uploaded onto a server. For bloggers the best free server are Google Sites or Google Drive. Once Uploaded, copy the url of music file and use it in any one of the following codes (whatever you use).

There are two main methods of embedding or using background music in your blog or website, based on the type of browser compatibility. For browsers having HTML5 compatibility audio tags are used while for older browsers embed tag is used.

For using audio tags copy the following code anywhere in your website or blog, inside the body tags. Replace the music url with your music file URL. The text in between audio tags “your browser doesn’t support HTML5” is shown in the browsers that doesn’t support HTML5, if you want to remove it you can.

Code

<audio src="music url" controls>
<p>Your Browser Doesn’t Support HTML5</p>
</audio>

For older browsers or for browsers that don’t have HTML5 compatibility use the following code.

Code

<embed name="bgmusic" src="music url" width="300" height="90" autostart="false" control="smallconsole" />

You can change the width, height, autostart and name attributes as you wish. For cross browser support and to avoid any problem it is better to use both these code, i.e. using embed tag in between audio tags as shown below.

Code

<audio src="music url" controls> <embed src="music url" width="300" height="90" loop="false" autostart="false" control="smallconsole" />
</audio>

For any queries and troubleshooting problems feel free to ask.