Results 1 to 10 of 10

Thread: HTML5 background audio player not working in Firefox

  1. #1
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default HTML5 background audio player not working in Firefox

    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
    Last edited by xotj123; 05-30-2012 at 11:22 PM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 05-31-2012 at 08:14 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    /* 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    May 2012
    Location
    Houston, TX
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •