web-dev-qa-db-fra.com

Le contrôle JavaScript de <audio> ne fonctionne pas dans Firefox, fonctionne dans Chrome

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

Problème/Question: Cela, avec d'innombrables autres moyens de contrôler l'audio via JavaScript, fonctionne correctement dans Chrome, cela ne fonctionne pas dans Firefox ou IE. Pourquoi? Comment peut-il être changé?

Au fait: Oui, je sais que je peux utiliser l'attribut autoplay, ce n'est pas ce que je recherche car je dois pouvoir l'activer et le désactiver et régler le volume via JavaScript. Oui, je sais que la musique de fond est agaçante.

html5firefoxaudio
3
broccoli_soup

Si vous inspectez la demande dans un débogueur HTTP ou un moniteur HTTP (comme le panneau "Net" dans Firebug, par exemple, ou un outil similaire pour tout autre navigateur), vous verrez probablement cette demande dans le fichier .ogg renvoyé erreur 404 malgré le fait que le fichier existe .

La raison en est - IIS/IIS Express et peut-être le serveur Web de développement intégré à Visual Studio (Cassini) ne pas servir statique fichiers si l'extension du fichier est inconnue (c'est fait exprès pour des raisons de sécurité).

Si votre serveur Web est IIS 7.x ou IIS Express (que vous pouvez facilement installer si vous utilisez Windows Vista/7./2008 Server), vous devez ajouter un type mime pour l'extension .ogg ("audio/ogg"). Vous pouvez facilement le faire via IIS Manager - voir question connexe pour connaître la procédure exacte. Si vous ne pouvez pas le faire en utilisant l'interface graphique, faites-le via le fichier web.config situé dans le dossier racine du site Web. Par exemple:

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

Malheureusement , le serveur Web de développement intégré dans Visual Studio (Cassini) n'a aucune connaissance de <system.webServer>. De plus, les types de contenu de fichier statiques sur le serveur Web de développement de Visual Studio sont codés en dur (vérifiez cette question: https://stackoverflow.com/questions/5924647/setting-mime-types-using-the-asp-net- serveur de développement ).

Je ne parvenais pas à trouver comment indiquer au serveur Web intégré ce que sont les fichiers .ogg (comment ajouter un type mime).

En fonction de ce qui précède, je vous recommande d’installer et de commencer à utiliser IIS 7.x ou IIS Express au lieu du serveur Web de développement intégré ( Comment définir IIS/IIS Express sur être utilisé comme serveur Web au lieu de intégré ).

1
LazyOne