X
Tap here to go to the mobile version of the site.
Your Firefox is out of date and may contain a security risk! Upgrade Firefox

Support Forum

HTML 5 <audio> tag not working in FF

Posted

I am developing a website in asp.net and html 5 and trying to add some audio to the site.

My site is:

http://www.kevinroseworld.com/music.aspx/

It is, currently, a very simple set up, just the one song. It works fine in Chrome and Safari, IE does not support the Audio tag and the message appears where it is supposed to, however, Firefox does not display the error message or play the audio file.

I started using FF 3.6.10 and have now upgraded to FF 4 Beta 6 and neither version works.

Any advice as to how to fix this?

I also had a look on other forums and found others with the same problem: http://www.manifestmusicproductions.com/soundsNonflash.php for example, works in Chrome/Safari but not in FF.

Additional System Details

This happened

Every time Firefox opened

This started when...

I tried to use HTML 5's <audio> tag

Installed Plug-ins

  • Provides additional functionality on Facebook. See our web site for details.
  • Google Update
  • Shockwave Flash 10.1 r53
  • iTunes Detector Plug-in
  • GEPlugin
  • Next Generation Java Plug-in 1.6.0_21 for Mozilla browsers
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Windows Activation Technologies Plugin for Mozilla
  • 4.0.50917.0
  • Office Authorization plug-in for NPAPI browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • NPWLPG
  • wpidetector
  • Version 0.9.17, copyright 2008-2010 Veetle Inchttp://www.veetle.com/
  • Version 0.9.18, Copyright 2006-2009 Veetle Inchttp://www.veetle.com/
  • Version 0.9.18, copyright 2006-2010 Veetle Inchttp://www.veetle.com/
  • Adobe PDF Plug-In For Firefox and Netscape "9.3.4"
  • The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b6) Gecko/20100101 Firefox/4.0b6

More Information

File works in Chrome and Safari, error message in IE but nothing in FF.

cor-el
  • Top 10 Contributor
  • Moderator
10777 solutions 96999 answers

Helpful Reply

You can't play MP3 files with such a code in Firefox.
See https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements

<audio controls="controls"> 
	<source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

You will have to use a normal object element to play that song in Firefox.
You can look these as an example:

<object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object>
<embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" >

Question owner

Thank you for your reply.

Looking at that link and doing a bit more research led me to https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox.

Both of these help pages say that .ogg files are supported in Firefox. However I added the audio in .ogg format and my code still does not work.

<audio controls="controls"> 
        <source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.ogg" type="audio/ogg" />
	<source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>

Is the <audio> tag simply not supported by firefox (yet)? I can ofc use a flash plug in (or JS or whatever) to work around this (as I will need to do for IE anyway) but would much prefer this to work in Firefox without this need.

Modified by cor-el

josephsong 0 solutions 1 answers

You likely already figured this out, but <audio src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.ogg" controls="controls"></audio> works just fine in FF3.6.

Question owner

Hello and thank you for your reply.

Yes the site is now working in all HTML 5 supporting browsers including FF.

My problem was not a coding one as it happens, but I had missed out some essential information on the ogg file itself. Fortunately I have now solver the problem.

Thank you again

lee8oi 0 solutions 1 answers

you said you solved the problem by correcting some essential information in the ogg file itself? could you explain please? I seem to have problems playing any ogg file I make or convert, but theres ogg files online that play just fine. I'd really like to know what solution you found please.

Question owner

Hello

Yes, the problem was that I missed out a MIME type on the OGG files.

Hope this helps you.

mongoose_za 0 solutions 3 answers

Hi,

I'm having the same problem. I'm using .ogg file but still won't play. What do you mean you missed out the MIME type?

I'm using this <audio src="http://kmwithcath.supreme-solutions.co.uk/media/uploads/Ilovemyfamily.ogg" controls="controls" autoplay="autoplay"> Your browser does not support the audio element. Please use Firefox, Chrome or Safari to view this site. </audio> Which won't play in my FF but does in Chrome and Safari.

mongoose_za 0 solutions 3 answers

I'm now using this

<audio  controls="controls" autoplay="autoplay" >
	<source src="http://kmwithcath.supreme-solutions.co.uk/media/uploads/Ilovemyfamily.ogg" type="audio/ogg" tabindex="0" />
	Your browser does not support the audio element. Please use Firefox, Chrome or Safari to view this site.
</audio>


But still it doesn't play in FF. I'm using FF 3.6.13

Modified by cor-el

Question owner

The responce I got from my website hosts is this...

IME type was missing for the .ogg files and I have fixed that now. As you can see the http://www.kevinroseworld.com/Music.aspx is now working properly.

My code is still the same as before...

<p>San Rora</p>
<audio controls="controls"> 
   <source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/SanRora.ogg" type="audio/ogg" />
   <source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/SanRora.mp3" type="audio/mpeg" />
    Your browser does not support the audio element.
</audio>


Unfortunately I am not an expert on ogg files so am not 100% sure what needs to be done. However, http://wiki.xiph.org/MIME_Types_and_File_Extensions looks like a really good site.

Modified by cor-el

mongoose_za 0 solutions 3 answers

Helpful Reply

well for anyone else. my html was fine. in fact the server nginx was returning the wrong content-type and so i had to add the MIME types into my nginx config file.

kalasa 0 solutions 1 answers

Use data="media location" instead of src=""

lifthz 0 solutions 1 answers

You gotta make sure the mime type on your HOST is matching with what you put in the "type=" attribute for .ogg. For example my server uses "application/ogg", then Firefox picked it up. Seems Firefox is the only browser that doesn't support mp3s still though. :/

FirefoxinUbuntu 0 solutions 13 answers

I am frustrated. I have dived into creating an html 5 page on my local server playing music files encoded in .ogg.

After adding "application/ogg ogg" to my mime.types, I get the audio I downloaded from kevinsworld.com to play. Using EasyTag in Ubuntu I discover this is a 192 kbps file.

I resampled my 499 kbps platters file to 192 kbps, and it plays locally in Movie Player, but it does not play in Firefox. I am at a loss here.

My local domain name on my server running on my network is i.con. I set that name into the hosts files on each computer on my network.

Here is my code:

[CODE]<body> <audio src="http://i.con/platters.ogg" controls="controls" autoplay="autoplay"></audio>

<audio src="http://i.con/BajeLaCalle.ogg" controls="controls"></audio> </body>/CODE

The first audio tag is my non-playing song, whether I have auto play there or not. No controls are displayed, but I can copy the audio link address or save the file by clicking on the grey box that appears in the place of the controls. It has an X embedded in it.

The second audio tag is the same thing but just playing the song I downloaded from kevinsworld. As displayed, I can start playing this song manually, and if I move the auto play into that tag it fires right off.

I just copied the BajeLaCalle.ogg file into the place of platters.ogg and both players work. Both files are located in the web root. Both files are 192 kbps, both are 44.1 kHz, platters is 2 meg and BajeLaCalle is 3.1 meg, according to EasyTag.

So what am I missing here?

BrunoF 0 solutions 1 answers

Same problem here.

This is only for IIS, should be "similar" for other Servers.

Go to IIS control panel(mine is v7.5), and choose MIME types icon. Click "Add" and put: extension: .ogg MIME type: audio/ogg

You're done!

farschidus 0 solutions 1 answers

BrunoF, Thanks. I added the MIME and my problem gone.

Modified by farschidus