HTML5 Popup Audio

Sound setup in Allwebco web templates

HTML5 template audio
For this template audio style, HTML5 as well as "fall-back" embed and object code are all used.

Check if you have this style:
If you have this type of audio, your web site should include a file named "player-HTML5.js" in the sounds or samples folder.

Audio files:
The primary file type used is: mp3. An option for ogg sound is included. See below for details.


Files for the HTML5 mp3 player
All files for the player, the player HTML page and player .js code, with options, will be located in your "sounds" or "samples" or "audio-HTML5" folder.


Variables in the player-HTML5.js file
Click below to view a description of the variables in the "player-HTML5.js" file.





The fall-back code
HTML 4.01 embed and object code is included so mp3s will still play in pre-HTML5 web browsers like IE8 and earlier. This older code automatically works when HTML5 is not detected in the user's browser.


About the .ogg file option
The HTML5 mp3 player defaults to playing only mp3 files. Any web browser that does not support mp3 with HTML5 player code (except Firefox) will play the "sample_song.ogg". See next section to change this option.

Firefox is setup in the "player-HTML5.js" to use older non-HTML5 code to play mp3 files, unless the ogg option is set to yes. This is added because the Firefox browser can not play mp3 files using HTML5 code due to licensing restrictions. This allows for the highest compatibility using only mp3 files.


Using the .ogg file option
The .ogg audio file option is included in the "player-HTML5.js" so you can play sound in any web browser with HTML5 audio code. To fully utilize the .ogg option for Firefox and Opera:

1. Convert all your mp3s you are using to .ogg. Keep both the .ogg and .mp3 files and they should have matching names (Example: song-1.mp3 and song-1.ogg). A free version of Sony SoundForge is available that works for ogg conversion.
2. In the "player-HTML5.js" edit the "var useOGG" to "yes".
3. Upload both the .mp3 and .ogg files.
4. Make sure your hosting account allows for the mime type .ogg or have it added.
5. You can test the .ogg files in the Firefox and/or Opera browsers.

Adding more samples pages
See your template "help.html" page in the options section to add another mp3 samples page.


Popup player and other mp3 player window options
See your template "help.html" page in the options section for player window options.


About Firefox and Opera
Firefox and Opera browsers do not support playing mp3s using HTML5 code. Fall-back HTML 4.01 code is included and detection for Firefox is included so mp3 files can still be played using the older code. If the "var useOGG" is set to "yes" as outlined above then this older code is not used and HTML5 code to play ogg files in Firefox is then used. The fall-back code is included because of the popularity of the Firefox browser so mp3s will still play in most versions.