JavaScript control of <audio> not working in Firefox, works in Chrome

Question

<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.

Answer 1

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).