Website for musicians

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.

xmp3 mini Flash HTML5 mp3 player

Flash / Html5 / Mp3 Player Addons:

Continuous music  |   Mini Mp3  |   X-mp3 Player


Before You Start:
Even though the following is true HTML5 code, it can not run in some browsers without the Quicktime plugin addon enabled. For a music player application with higher compatibility (Flash with HTML5 fallback) see the Mini 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 the yes/no options for: "center", "autoplay" and "loop".

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

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




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:





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.








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.

Real Audio Non-Working Sample






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


Allwebco Template Support


Allwebco Website Template Support


Continuous Website Music
Website addon for continuous webpage sound.
AllwebcoDesign.com
Web Template Support
Mp3 Musician Templates
Professional templates for any music style.
AllwebcoDesign.com
Website Templates
Music For Websites
Royalty free music for website projects.
square-peach.com
Website Templates
Free Mp3 Download
Download free mp3s for websites.
Allwebco-Templates
Website Templates
Website Design In HTML5
HTML5 web templates details and help.
AllwebcoDesign.com



Royalty Free Video and Website Music


HTML5 Video





Flash Players
xmp3 Player
xmp3 mini Player

Add-Ons
Allwebco Add-ons




Website Template Support
Website Template Support