HTML 5 <audio> tag not working in FF
I am developing a website in asp.net and html 5 and trying to add some audio to the site.
My site is:
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
Every time Firefox opened
This started when...
I tried to use HTML 5's <audio> tag
- Provides additional functionality on Facebook. See our web site for details.
- Google Update
- Shockwave Flash 10.1 r53
- iTunes Detector Plug-in
- 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
- Office Authorization plug-in for NPAPI browsers
- The plug-in allows you to open and edit files using Microsoft Office applications
- 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.
- User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b6) Gecko/20100101 Firefox/4.0b6
File works in Chrome and Safari, error message in IE but nothing in FF.
You can't play MP3 files with such a code in Firefox.
<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" >
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
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.
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
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.
Yes, the problem was that I missed out a MIME type on the OGG files.
Hope this helps you.
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.
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
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
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.
Use data="media location" instead of src=""
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. :/
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?
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
BrunoF, Thanks. I added the MIME and my problem gone.
Modified by farschidus