Website Template Music

Adding Music to a Website or Template

You can add a sound player console or a musical background to your template, we have provided code you can copy on this page.

Flash / Html5 / Mp3 Player Addons:

Continuous music | Mini Mp3 | X-mp3 Player

Option #1 - HTML5 Audio Cross-Browser W/Fallback
Visible player for mp3 and ogg - Latest Code:
HTML5 audio with a border as you see right below this paragraph. INSTRUCTIONS: Download the "Audio-HTML5-code.zip" and follow the instructions in the "README-music.txt". Compatible in any HTML5 web browser. Older "object" embedded mp3 player code will display in non-HTML5 web browsers. For Mac and PC.

1.

Click to download the files and code for HTML5 audio.

2. Place the "Audio-HTML5.js" in your website folder.

3. Place the .mp3 and .ogg files in your website folder.

4. Add this line to any HTML page you want to add sound to:

5. Replace the .mp3 and .ogg files. For ogg conversion info see homepage audio.

6. Edit the "Audio-HTML5.js" to change options. Also see HTML5 Audio at W3C Schools for more details and options for the code used in this addon.

7. You may need to add the "mime" type ogg in your hosting control panel.

8. You can set the music to loop in the "Audio-HTML5.js".

Option #2 - HTML5 Background Sound W/Fallback
Hidden player for mp3 and ogg - Latest Code:
Paste the following code into any HTML page. Create a "home-sound.mp3" and a "home-sound.ogg" sound file. You may need to add the "mime" type ogg in your hosting control panel. Includes "fallback" "bgsound" for non-HTML5 IE browsers only. For Mac and PC. For ogg conversion info see homepage audio.

Looping the Music For Option #2
Edit the loop="1" to loop="100" on code line number 14, and locate the audio tag in the sound code and add "loop" as highlighted below:

document.write('<audio loop autoplay="autoplay">');

Option #3 - Simple Background Sound For IE Only
For simple background music in Internet Explorer only use the following code:

<bgsound src="your-file.mp3" loop="false">

Option #4 - Background Sound Cross-Browser With Fallback
Uses some HTML5, but is not strictly HTML5 code. INSTRUCTIONS: Name your mp3 music file "bgmusic1.mp3" and place it in the folder with the page you add the following code to. This code uses some HTML5 as well as javascript for browser detection. Compatible in most browsers. Can use mp3, wav, mid, au files.

Copy and paste the following code into your HTML page somewhere after the "body" tag:

<!-- START SOUND CODE V3.15  -->
<center>
<script language="JavaScript" type="text/javascript">
<!--
// PLAYER VARIABLES

var mp3snd = "bgmusic1.mp3";
var bkcolor = "000000";

if ( navigator.userAgent.toLowerCase().indexOf( "msie" ) != -1 ) {
document.write('<bgsound src="'+mp3snd+'" loop="1">');
}
else if ( navigator.userAgent.toLowerCase().indexOf( "firefox" ) != -1 ) {
document.write('<object data="'+mp3snd+'" type="application/x-mplayer2" width="0" height="0">');
document.write('<param name="filename" value="'+mp3snd+'">');
document.write('<param name="autostart" value="1">');
document.write('</object>');
}
else {
document.write('<audio src="'+mp3snd+'" autoplay="autoplay">');
document.write('<object data="'+mp3snd+'" type="application/x-mplayer2" width="0" height="0">');
document.write('<param name="filename" value="'+mp3snd+'">');
document.write('<param name="autostart" value="1">');
document.write('<embed height="2" width="2" src="'+mp3snd+'" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="false" controls="false" autoplay="true" autostart="true" loop="false" bgcolor="#'+bkcolor+'"><br>');
document.write('</embed></object>');
document.write('</audio>');
}
//-->
</script>
<br>
</center>
<!-- END SOUND CODE V3.15 -->

Option #5 - Quicktime Player (for mp3, wav, mid, au or video files)
To add a small Quicktime console, copy and paste the following code. Compatible in IE, Firefox and Netscape browsers. For Mac and PC as long as Quicktime is installed. Be sure to edit "your-file.mid" in two places with this code. Quicktime code may display messages about Active X controls in IE.

Option #6 - Windows Player Page Code (for mp3, wav, mid, au or video files)
The following code may display messages about Active X controls in IE. To add a Windows Media console with a border as you see above, copy and paste the following code. Compatible in IE, Firefox and Netscape browsers. Be sure to edit "your-file.mid" in two places with this code. Can be used for video as well.

<table border="3" cellspacing="0" cellpadding="0" bordercolor="#99CCFF" bordercolorlight="#DBEDFF" bordercolordark="#5B7997"><tr><td>
<object id="MediaPlayer1" width="300" height="45" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,0,02,902"
standby="Loading Microsoft Windows Media Player..." type="application/x-oleobject">
<param name="FileName" value="your-file.mid">
<param name="animationatStart" value="false">
<param name="transparentatStart" value="true">
<param name="autoStart" value="true">
<param name="showControls" value="true">
<param name="Volume" value="-100">
<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="MediaPlayer" src="your-file.mid" autostart="true" showstatusbar="1" volume="-1" height="50" width="300"></embed></object>
</td></tr></table>

Option #7 - RealAudio Player (for mp3, wav, mid, au or video files)
You can add the realaudio player to any template. Click here for realaudio details, or copy the code below and paste it into your page.

More Website Addons & HTML5 Audio Players
See Allwebco Website Applications.

NOTES: Copy the above selected code and paste these lines into your webpage anywhere in the body of the HTML document. You can place it after the text in the page or anywhere else is fine. It is best to do this edit using Notepad or a Simple Text editor.

Related Topics:
Add a Music Popup
Bob's Mighty MIDI Site
Audio On Hover

Music For Websites
Royalty free music for website projects.
square-peach.com

Free Mp3 Download
Download free mp3s for websites.
Allwebco-Templates

Continuous Website Music
Website addon for continuous webpage sound.
AllwebcoDesign.com

Mp3 Musician Templates
Professional templates for any music style.
AllwebcoDesign.com

Flash HTML5 Mp3 Player Mini
Skinnable mp3 Flash website player.
AllwebcoDesign.com

Flash Mp3 Player
Skinnable Flash mp3 website player.
AllwebcoDesign.com

Website Design In HTML5
HTML5 web templates details and help.
AllwebcoDesign.com

Flash Players
xmp3 Player
xmp3 mini Player

Add-Ons
Allwebco Add-ons