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 |
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
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.
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.
Add a Music Popup
Bob's Mighty MIDI Site
Audio On Hover