treehouse : what would you like to learn today?
Web Design Web Development iOS Development

HTML5 Audio element not working in Firefox.

  • Ok all,
    I'm about to pull my hair out on this! I cannot get the simple html5 AUDIO element to work in firefox! Upon page load, you see the player appear and then it disappears to a black box with an X in it. I have the needed .ogg file on the server. I have the file linked to:
    <audio controls="controls">
    <source src="lightoftheworldprev.mp3">
    <source src="lightoftheworldprev.ogg">
    Your browser does not support the html5 audio element. Please upgrade or do not use Internet Explorer!
    </audio>


    I have tried adding this
    # OGG
    AddType application/ogg .ogg
    into an .htaccess file and I've tried all different variations in the .htaccess file too. I've tried "AddType audio/ogg .ogg", I've tried "AddType application/audio/ogg .ogg", I've tried "AddType audio/ogg" without the extension, etc etc. The mp3 file works perfect on Safari and Chrome. What else can I try? Does it seem like it's a server issue? Do I need to add more to the .htaccess file? The site is on a shared 1and1 server. Thanks in advance for any suggestions you might have!
  • Hmm, just found out that the client's site is hosted on a Microsoft shared server. I'm really not sure, but is this preventing the .htaccess file from making any difference, since it's not an apache server?
  • Anyone have any ideas at all?
  • I got it figured out. It did have to do with the server being a microsoft shared server. Go figure, right! Anyway, if anyone else ends up having this problem, just contact the hosting company and ask them to add .ogg as a MIME type to that server and it will work perfect!
  • Hey, Preeminent, thank you SO much for posting this problem and your entire process up through the solution. I had the same problem, and was really frustrated that such a simple tag wasn't working as it should with Firefox. But my client was on a Linux server, so it obviously wasn't the MIME issue, but I went right for the .htaccess solution, and that did the trick. A million thanks!
  • @MsFjordstone Awesome! I'm glad that someone found this useful. I had that feeling that others might run into the same issue.
  • Thank you so much! I spent two days trying to figure out why my audio would not work in Firefox when it had worked all along. My web host just upgraded my site to a new platform and the .ogg MIME type was not supported. I added it to the .htaccess file as a supported format. Works now like a charm. Thanks again. Blessings to you.

  • Awesome! Glad I can give back to the community in my own little way, haha!