HTML5 Webpage Audio

Adding sound and music to webpages

Pinned Note Website Sound
Sound player console and background music scripts for HTML websites or web templates. Includes fallback code for older browsers.

See Also…

Option #1 - HTML5 Audio Cross-Browser W/Fallback
Visible player for mp3 and ogg - Latest Code:
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. Download Zip Folder 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:



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 "your-sound.mp3" and a "your-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 (browsers before IE9). For Mac and PC. For ogg conversion info see homepage audio. Works with mp3, ogg and wav files.




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 - Background Sound Cross-Browser With Fallback
Includes more fallback code for even older web browsers:
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:







Sell Mp3 Music Downloads On-line


Option #4 - Simple Background Sound For IE Only
Obsolete: not in use after IE9:
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)
Obsolete: use the audio tag as outlined above:
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.






Option #6 - Windows Player Page Code (for mp3, wav, mid, au or video files)
Obsolete: use the audio tag as outlined above:
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.






Option #7 - RealAudio Player (for mp3, wav, mid, au or video files)
Obsolete: use the audio tag as outlined above:
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
Royalty Free Music
Audio On Hover