Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
<audio id="audioMusic" loop="loop">
  <source src="/Music/behind_you.ogg" type="audio/ogg" />
  <source src="/Music/behind_you.mp3" type="audio/mp3" /> 
</audio>
<script type="text/javascript">
   var a = document.getElementById("audioMusic");
   a.play();
</script>

Problem / Question: This, along with countless other ways of controlling audio via JavaScript, works fine in Chrome, it does not work in Firefox or IE. Why? How can it be changed?

By the way: Yes, I know I can use the autoplay attribute, that's not what I am looking for because I need to be able to turn it on and off and adjust volume via JavaScript. Yes, I know that background music is annoying.

share|improve this question
    
1) What Firefox version do you have; 2) Which web server do you have? Is it IIS? It's working fine in Firefox 5.01 after making small configuration change to a web server. –  LazyOne Jul 31 '11 at 8:49
    
@LazyOne I have the latest Firefox (5.0.1) but i am testing in on the ASP.NET development server that comes with visual studio. What was the server configuration issue? –  broccoli_soup Jul 31 '11 at 17:51

1 Answer 1

up vote 1 down vote accepted

If you inspect the request in any HTTP Debugger or HTTP Monitor (like "Net" panel in Firebug, for example, or similar tool for any other browser) you most likely will see that request to .ogg file returned 404 error despite the fact that file DOES exist.

The reason is -- IIS/IIS Express and maybe the built-in development web server in Visual Studio (Cassini) do not serve static files if file extension is unknown (that is done on purpose for security reasons).

If your web server is IIS 7.x or IIS Express (which you can easily install if you are on Windows Vista / 7 / 2008 Server), then you need to add mime type for .ogg extension (which is "audio/ogg"). You can easily do it via IIS Manager -- see related question for exact steps. If you cannot do it using GUI -- then do it via web.config file in website root folder. For example:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".m4v" mimeType="video/m4v" />
            <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
            <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
            <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
            <mimeMap fileExtension=".webm" mimeType="video/webm"/>
        </staticContent>
    </system.webServer>
</configuration>

Unfortunately the built-in development web server in Visual Studio (Cassini) has no knowledge of <system.webServer>. Also the static file content types in Visual Studio's development web server are hard coded (check this question: http://stackoverflow.com/questions/5924647/setting-mime-types-using-the-asp-net-development-server).

I was unable to find how to tell built-in web server what .ogg files are (how to add mime type).

Based on the above I recommend installing and start using IIS 7.x or IIS Express instead of built-in development web server (How to set IIS/IIS Express to be used as web server instead of built-in).

share|improve this answer
    
That certainly seems like the problem - it returns a 206 partial content for the ogg file. Thanks. –  broccoli_soup Jul 31 '11 at 19:32
    
Now that's a quality answer! –  John Conde Jul 31 '11 at 19:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.