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

  • 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

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: https://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).

| 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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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