HTML5 Webpage Audio

Adding sound and music to webpages

Option #1 - HTML5 Audio Cross-Browser W/Fallback
HTML5 audio player with fallback code for older web browsers. Download the "Audio-HTML5-code.zip" and follow the instructions below, or in the "README-music.txt" in the download. Compatible in all HTML5 web browsers. Older non-HTML5 web browsers use the fallback "object" and "embed" mp3 player code. For Mac or PC. Works with mp3, ogg and wav files.



1. Click to download the HTML5 audio files and code

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:

<script type="text/javascript" src="Audio-HTML5.js"></script>

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
Use one of the following two options. Use mp3 only, or use mp3 and ogg to allow for browsers that do not support mp3 audio.

Paste the following code into any HTML page. Create a "your-sound.mp3". Includes "fallback bgsound" for non-HTML5 IE browsers only (browsers before IE9). For Mac and PC.

<!-- START SOUND CODE V4.1a HTML5 --> <script type="text/javascript"> // PLAYER VARIABLES var mp3snd = "your-sound.mp3"; document.write('<audio autoplay="autoplay">'); document.write('<source src="'+mp3snd+'" type="audio/mpeg">'); document.write('<!--[if lt IE 9]>'); document.write('<bgsound src="'+mp3snd+'" loop="1">'); document.write('<![endif]-->'); document.write('</audio>'); </script> <br> <!-- END SOUND CODE V4.1a -->

If you want to add the option to play .ogg files for the Firefox and Opera browsers, use the following code instead. Create a "your-sound.mp3" and a "your-sound.ogg" sound file. You may need to add the "mime" type ogg in your hosting control panel. For ogg conversion info see support for homepage audio.

<!-- START SOUND CODE V4.1b HTML5 --> <script type="text/javascript"> // PLAYER VARIABLES var mp3snd = "your-sound.mp3"; var oggsnd = "your-sound.ogg"; document.write('<audio autoplay="autoplay">'); document.write('<source src="'+mp3snd+'" type="audio/mpeg">'); document.write('<source src="'+oggsnd+'" type="audio/ogg">'); document.write('<!--[if lt IE 9]>'); document.write('<bgsound src="'+mp3snd+'" loop="1">'); document.write('<![endif]-->'); document.write('</audio>'); </script> <br> <!-- END SOUND CODE V4.1b -->

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

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


Option #3 - Background Sound Cross-Browser With Fallback
Uses some HTML5, but is not strictly HTML5 code. Name your mp3 music file "your-sound.mp3". Place it in the same folder with the HTML you paste following code into. This code uses some HTML5 as well as javascript for browser detection. Compatible in most browsers. Works with mp3, ogg and wav files.

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

<!-- START SOUND CODE V3.15 --> <div style="text-align: center;"> <script type="text/javascript"> // PLAYER VARIABLES var mp3snd = "your-sound.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> </div> <!-- END SOUND CODE V3.15 -->

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

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


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-sound.mp3" in two places with this code. Quicktime code may display messages about Active X controls in IE.

<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="16" width="250"> <param name="src" value="your-sound.mp3"> <param name="autoplay" value="true"> <param name="controller" value="true"> <embed height="16" width="250" src="your-sound.mp3" pluginspage="http://www.apple.com/quicktime/download/" type="video/quicktime" controller="true" autoplay="true"> </object>

Option #6 - Windows Player Page Code (for mp3, wav, mid, au or video files)
HTML 4.01 code for older websites. 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-sound.mp3" in two places with this code. Can be used for video as well. The following code may display messages about Active X controls in IE.

<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-sound.mp3"> <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-sound.mp3" 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.

<object id=rvocx classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="350" height="36"> <param name="SRC" value="your-sound.mp3"> <param name="CONTROLS" value="ControlPanel"> <param name="CONSOLE" value="one"> <embed src="your-sound.mp3" width="350" height="36" nojava="true" controls="ControlPanel" console="one"> </object>

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
Royalty Free Music
Audio On Hover