Skip navigation
butterfly4712
Currently Being Moderated

Why are my audio files not showing up in Firefox and IE?

May 3, 2013 6:16 PM

Tags: #audio #mp3 #ogg #wav

I am building a website that consist of audio files for voice demos that are no longer than 2 minutes in length. The audio player shows up and work great in Safari. Here is what my coding looks like...

 

<audio controls="controlpanel">

    <source src="music/Commercial Demo.wav"type="audio/wav"/>

    <source src="music/Commercial Demo.ogg"type="audio/ogg"/>

    <source src="music/Commercial Demo.mp3"type="audio/mp3"/> </audio>

 

I've done some reading and learned that not all web browsers use the same file type so that is why I coded it with wav, ogg, and mp3. Still no luck with the audio player showing up in Firefox or Internet Explorer. When the page first loads in Firefox the audio players show up for  a second and then all disappear! Am I coding this incorrectly? I also read some things about firewalls and I have mine down so it should not be blocking anything.

 

Here is the link to the site with the demos. You can try opening it in Safari versus other web browsers and will see my problem. http://www.bristowvo.com/demos2.html

 

Any insight would be greatly appreciated! Thanks!

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2013 7:44 AM   in reply to butterfly4712

    Firstly, you're using <audio> which is a HTML5 tag, but your doctype shows XHTML1. Change this:

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

     

    to this:

     

     

    <!DOCTYPE html>

     

     

    Browsers go to quirks mode when they see a major doctype conflict such as this one.

     

    Secondly, HTML5 Audio is not fully supported/ native in some browsers - especially older ones. You can consider using a 3rd party HTML5 player such as http://mediaelementjs.com/ because they usually have a fallback mechanism to ensure your file works on older browsers.

     

    Another observation: There is no space between 2 attributes in your code.

     

        <source src="music/Commercial Demo.wav"type="audio/wav"/>

    Should ideally be like this:

     

        <source src="music/Commercial Demo.wav" type="audio/wav"/>

    Note the space between src and type.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2013 8:57 AM   in reply to Sudarshan Thiagarajan

    That will work, but only IF your Apache Server knows what an .OGG file is. I also do not think that anything, outside of Microsoft's Internet Exploder, will play a .WAV file, so I would put that last.

     

    So you want .MP3 first, then .OGG and then .WAV.

     

    And you want to put the following into your .htaccess file:

     

    AddType audio/ogg .oga

    AddType video/ogg .ogv

    AddType application/ogg .ogg

    AddHandler application-ogg .ogg .ogv .oga

     

    This addition to your .htaccess file will ensure that your Apache server will send these types of files as a binary stream instead of trying to send it as a string of ASCII text.

     

    If you are on a Microsoft IIS server, you may also have to enable that kind of a file as well, but I don't use a Microsoft server, so I don't know how to do that.

     
    |
    Mark as:
  • Currently Being Moderated
    May 4, 2013 7:15 PM   in reply to butterfly4712

    Oh, crud.

     

    Is there any other host you can go to, like BlueHost or Inmotion Hosting?

     

    If you are trying to do anything with a GoDaddy host, like edit an .htaccess file, you're asking for problems.

     

    See if your Control Panel will allow you to add or change a MIME type. That would do it.

     

    But web professionals don't let their friends use GoDaddy. I think some of their servers are IIS, too, and they pack thousands of websites on them to make them extra slow...

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    May 4, 2013 10:15 PM   in reply to butterfly4712

    @butterfly4712: Did you fix the issues I've mentioned in Reply #1?

     

    I'd +1 mhollis on that. GoDaddy is one of the worst webhosts. Ever. Period. Their customer service is ridiculously bad. I suggest moving to the other providers mhollis recommended. You could also consider 1and1.com. While they dont give you the all-original cPanel like Justhost does, they're very reliable and my clients have never had trouble with their servers/ customer service. They're very affordable too.

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 10:09 AM   in reply to butterfly4712

    You need to look through the control panel for adding MIME types, as I suggested above. Or call tech support, speak to someone who doesn't know anything, escalate, find out that they "don't support that."

     

    ___

    "A discriminating irreverence is the creator and protector of human liberty."

    - Mark Twain

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 11:26 AM   in reply to butterfly4712

    First, you have to download the existing .htaccess file. Then you have to add the lines at the end, as I said.

     

    Ask GoDaddy support to generate a new one or restore the old one. An .htaccess document will have identification as to the domain, who to allow access (all, because it is serving public documents) and any other configurations, like additional MIME types to support.

     

    -Mark

     

    ___

    "A discriminating irreverence is the creator and protector of human liberty."

    - Mark Twain

     
    |
    Mark as:
  • Currently Being Moderated
    May 5, 2013 11:29 AM   in reply to butterfly4712

    If you're on shared hosting plan with GoDaddy, you probably cannot change your .htaccess file.  You would need to contact their tech support to help you.  Good luck with that!

     

    Even if your client paid GoDaddy up front for 5 years, they can still get their money back and change hosts if needed.  This might be something to consider.

     

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points