Can't play <audio> from website; but can from local file
I have the following HTML up at my website: <audio src="gnoss.ogg" controls autoplay> <bgsound src="gnoss.mid"> </audio> When I load the website from my webserver into Firefox, a blank control box shows up and nothing plays. When I load the very same site from my local disk into Firefox, everything functions perfectly. The website also functions perfectly in Chrome, both from the webserver and from my local disk.
Additional System Details
- Default Plug-in
- Adobe PDF Plug-In For Firefox and Netscape "9.3.4"
- NPRuntime Script Plug-in Library for Java(TM) Deploy
- The QuickTime Plugin allows you to view a wide variety of multimedia content in Web pages. For more information, visit the QuickTime Web site.
- Express View Browser Plugin
- Google Update
- Next Generation Java Plug-in 1.6.0_21 for Mozilla browsers
- Windows Presentation Foundation (WPF) plug-in for Mozilla browsers
- User Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:18.104.22.168) Gecko/20100914 Firefox/3.5.13 (.NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
The file http://www.mindspring.com/~giammo/personal/gnoss.ogg is send as text/plain by the server and that is probably causing it. It works if I save the page and the ogg file and open it locally.
Your response sounds reasonable, except that I can't figure out why Chrome should be responding properly to the very same page when delivered from the server. Shouldn't the Chrome browser be affected in the identical fashion from the .ogg file being delivered as text/plain?
Assuming that you have correctly identified the cause, would it help if I used a "source" statement, <audio controls autoplay>
I have continued to try various alternatives, but still have the problem that the <audio> element works when my site is loaded into firefox from my local disk, but produces a blank control panel with no sound when loaded from a server into firefox.
I now have tried two different servers and re-written the audio element:
These sites are identical and are using the audio element: <audio controls autoplay>
Both sites work perfectly under Chrome - so that I doubt that it is a server-related problem. I suggest that it is somehow a Firefox bug.
Firefox needs the correct MIME type. If you load the page locally then there is no MIME typ involved, but loading from internet is different and it will never work in Firefox if the server doesn't send the ogg file with a MIME type that is listed as supported for the audio element (audio/ogg) in the article that I posted above. There is nothing wrong with the original code. Firefox won't play that file if the server sends it as text/plain.
I realize this is an old post, but just in case it's helpful:
Firefox seems to be pickier about validating the files sent to it before it tries to play them than Chrome or the Android browser (for example).
The "mime type" is how the web server announces to the browser what kind of data it's sending, and until recently most web servers didn't know "out of the box" that ".ogg" files are "audio/ogg". If the web server doesn't recognize the file's extension, it'll usually default to announcing that what it's sending is "text/plain" or "application/binary", or something of the sort. Since those aren't types of data that Firefox can play as audio, Firefox just rejects it (even though the actual data being sent is "secretly" just audio/ogg).
If you don't have access to update your web server to recognize ".ogg" files as mimetype "audio/ogg", one possible workaround might be to explicitly specify the mimetype in the <audio> tag:
<audio src="gnoss.ogg" controls autoplay type='audio/ogg; codecs=vorbis'> <bgsound src="gnoss.mid"> </audio>
(This is probably too late to help the original questioner, who by now has presumably found a workaround, but might be useful for people with similar problems...)