Javascript Girl
  1. Javascript Girl
  3. Démarrer / mettre en pause l'audio dans une balise intégrée? (IE8 +)
Intereting Posts
Tr display none crashs ie9 Prototypes en JavaScript Décharger le fichier .js externe Note moyenne des étoiles Angularjs Comment mettre à jour la barre d'outils du profileur Web pour afficher les données sur une requête ajax Puis-je voir si une minuterie fonctionne encore? Valeur de la propriété javascript dépendante d'une autre propriété Peut-on obtenir l'historique du navigateur en utilisant Javascript? Vérifier toutes les valeurs d'entrée de la même classe est vide jquery Comment désactiver les boîtes de dialogue – Alerte ()? Envoyer formulaire sans recharger la page via AJAX Surligner les diagrammes de lignes de données de chevauchement Javascript frame navigation dans ie11 avec un pdf Regrouper un diagramme de barres empilés dans Highcharts Le courrier électronique de Meteor est indéfini

Démarrer / mettre en pause l'audio dans une balise intégrée? (IE8 +)

Je crée des pages pour un petit jeu basé sur le Web qui doit jouer de la musique de fond. Ces pages devraient être compatibles avec la plupart des navigateurs de bureau, y compris IE8 (mais nous pouvons ignorer les navigateurs mobiles).

Bien sûr, j'aimerais permettre à l'utilisateur d'arrêter la musique. Et c'est là que ça devient délicat.

Voici ce que j'utilise actuellement (avec jQuery): 

<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop"> <source src="sounds/bgmusic.mp3" type="audio/mpeg" /> <source src="sounds/bgmusic.ogg" type="audio/ogg" /> <embed hidden="true" autostart="true" loop="true" src="sounds/bgmusic.mp3" /> </audio> <div id="controls" class="controls"> <a id="playpause" class="play">Play/Pause</a> </div> <script> function isPlaying(audio) {return !audio.paused;} var a = document.getElementById('main_audio'); $('#playpause').on('click', function() { if (isPlaying(a)) { a.pause(); } else { a.play(); } }); </script>

Cela fonctionne bien dans tous les navigateurs, mais IE. (Je suis sur Windows XP, alors testez sur IE8 actuellement.) Sur IE8, l'audio commence à jouer (ce qui est bon), mais les contrôles ne font rien, donc il est impossible d'arrêter la musique (et de la redémarrer).

Comment puis-je faire fonctionner ce script aussi pour IE? En d'autres termes, interagissez avec la balise intégrée (mais uniquement dans IE)?

Essayez le prochain code: 

 <audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop"> <source src="sounds/bgmusic.mp3" type="audio/mpeg" /> <source src="sounds/bgmusic.ogg" type="audio/ogg" /> <embed id="main_audio_ie8" hidden="true" autostart="true" loop="true" src="sounds/bgmusic.mp3" /> </audio> <div id="controls" class="controls"> <a id="playpause" class="play">Play/Pause</a> </div> <script> var isPlaying = function(audio) {return !audio.paused;} var a = document.getElementById('main_audio'); if(!(a.play instanceof Function)){ a = document.getElementById('main_audio_ie8'); isPlaying = function(audio) {return audio.playState==2;} } $('#playpause').on('click', function() { if (isPlaying(a)) { a.pause(); } else { a.play(); } }); </script>

Une autre variante (le code doit fonctionner si WMPlayer.OCX existe sur le système; vérifié sur Win2K + IE6SP1 + WMP7, WinXP + IE6SP1 + WMP9, WinXP + IE8 + WMP11): 

 <audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop" volume="1.0"> <source src="sounds/bgmusic.mp3" type="audio/mpeg" /> <source src="sounds/bgmusic.ogg" type="audio/ogg" /> <object id="main_audio_ie8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;"> <param name="URL" value="sounds/bgmusic.mp3" /> <param name="uiMode" value="invisible" /> <param name="autoStart" value="true" /> <param name="volume" value="100" /> <param name="playCount" value="2147483647" /> <!-- (Int32) 2^31-1==2147483647 - maximum allowed count (for 1 second length audio is equals to 68+ years) --> </object> </audio> <div id="controls" class="controls"> <a id="playpause" class="play">Play/Pause</a> </div> <script type='text/javascript'> window.onload=function(){ var isPlaying,a=document.getElementById('main_audio'); if(a.play instanceof Function)isPlaying=function(audio){return !audio.paused;}; else{ a=document.getElementById('main_audio_ie8'); isPlaying=function(audio){return audio.playState==3;}; a.play=function(){this.controls.play();} a.pause=function(){this.controls.pause();} } document.getElementById('playpause').onclick=function() { if (isPlaying(a)) { a.pause(); } else { a.play(); } }; }; </script>