HTML5 background audio player not working in Firefox

[xotj123]

1) Script Title: HTML5 background audio player

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...udioplayer.htm

3) Describe problem: I have it working in IE9 but its not working in Firefox. Here is the url: http://project3.tjnhost.com

Any ideas what could prevent it from working in Firefox?

Regards,
TJ Havens

[jscheuer1]

Firefox doesn't play mp3. Make a .ogg copy* of:

TaxDeedLady.mp3

Place it in the:

/Media/Default/Audio/

folder, and configure it here in the audio tag:

<audio id="mybgplayer">
<source src="/Media/Default/Audio/TaxDeedLady.mp3" type="audio/mpeg"></source>
<source src="/Media/Default/Audio/TaxDeedLady.ogg" type="audio/ogg"></source>
</audio>

*There are free online conversion utilities for this, as well as free and paid software available for converting sound files. Use Google to find them.

[xotj123]

Ok, I did this, still not working. Any more ideas?

[jscheuer1]

The file:

http://project3.tjnhost.com/Media/Default/Audio/TaxDeedLady.ogg

is a 404 Not Found. I guess you either didn't understand that you needed to make a converted copy of TaxDeedLady.mp3 as TaxDeedLady.ogg and upload it to that location on the server, or you did and just forgot to upload it.

Just to be clear, it must be a converted copy, not just a copy. This is a good free online tool:

http://audio.online-convert.com/convert-to-ogg

For something like that, I'd choose a low bitrate like 48 or whatever is smallest and still high enough quality for playback. The spoken word doesn't need near the quality that music does. The default on that converter is 128 - way higher than what you need for what you have. It will make a pretty big file, over twice the size of the mp3 version.

One other thing, some browsers will not play your .ogg file if it has been renamed. So save it from the converter under the name they supply, which should be:

TaxDeedLady.ogg

and use it like that. You can copy and upload it, you just can't rename it. Again, this only affects some browsers.

[xotj123]

Thanks John, it was an IIS Web Server error. I had to add MIME Type .ogg to IIS. That resolved it, again thanks for your patience.

Regards,
TJ Havens

[xotj123]

I got another error now, this audio player is causing my header slider and twitter slider to act up.

SCRIPT438: Object doesn't support property or method 'cycle'

Using jquery on some other plugins...

Any ideas?

[jscheuer1]

There could also be other problems. But the audio script puts jQuery into noConflict mode. That would likely short circuit other jQuery code on the page.

Using a text only editor like NotePad, comment out the noConflict directive in bgaudioplayer.js as shown:

/* HTML5 background audio player 
* Created: Jan 31st, 2012 by DynamicDrive.com. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//jQuery.noConflict()

var bgaudioplayer = (function($){

	var audio5support = !!docum . . .

I see you've removed the sound from the page linked to in your first post. If you want more help, please put up a page that shows the problem.

[xotj123]

OK, its back up.... Notice the Image Slider no longer works and the twitter feed below it dosent work, both use jquery....

[xotj123]

OK, so commenting that out solved the problem, thank you.

[jscheuer1]

Is it? Doesn't seem to be here. I see you have jQuery on the page twice, perhaps more. It should only be used once, before all other scripts that need it.