Exemple d'ajout d'effets sonores à votre page Web HTML5_html5 conseils du didacticiel

L'ajout d'effets sonores appropriés aux interactions améliore souvent l'expérience utilisateur. Dans les fenêtres que nous connaissons, le bruit de déchiquetage du vidage de la corbeille en est un bon exemple.
Ce qui suit est un petit composant qui utilise HTML5 et Jquery pour ajouter des effets sonores à la page (il ajoute uniquement des effets sonores, pas un lecteur).
C'est en fait très simple, il suffit d'utiliser la balise audio en HTML5 pour jouer des sons. Cependant, afin de prendre en charge IE 6-8, bgsound est toujours utilisé.
Compatible avec tous les principaux navigateurs (les navigateurs non grand public ne sont pas pris en compte)
Assez de bavardage, voici le code :

Copier le code

Le code est le suivant :

Play
<script><br>/*Jouer le composant sonore*/<br>/*<br> * profil : JSON, {src:' chimes. wav',altSrc:'',loop:false}<br> * <br> * setSrc : Fonction, définir la source du son<br> * play : Fonction, jouer le son<br> */<br>if (! FUI){<br> var FUI = {};<br>}<br>FUI.soundComponent=function(profile){<br> this.profile={<br> src:'', //Fichier audio adresse<br> altSrc:'', // Adresse alternative du fichier audio (différents navigateurs prennent en charge différents formats audio, voir le tableau ci-joint) <br> loop:false // S'il faut lire en boucle, ce paramètre n'est pas utilisé actuellement <br> } ;<br> if(profile) {<br> $.extend(this.profile,profile);<br> }<br> this.soundObj=null;<br> this.isIE = !-[1,] ; <br> /*Cette méthode a été inventée par un expert senior. Elle utilise la différence entre JScript dans IE et non-IE pour gérer la dernière virgule "," du tableau <br> Cependant, pour IE 9, cette méthode. n'est pas valide, mais voici la bonne façon. Cela fonctionne pour moi car IE 9 prend en charge l'audio*/<br> this.init();<br>};<br>FUI.soundComponent.prototype={<br> init:function (){<br> this._setSrc ();<br> }, <br> _setSrc:function(){<br> if(this.soundObj){ <br> if(this.isIE){<br> this .soundObj[0].src=this .profile.src; <br> }else{<br> this.soundObj[0].innerHTML='<source src="' this.profile.src '" /> <br><source src=" ' this.profile.altSrc '" />'; <br> } <br> }else{<br> if(this.isIE){<br> this.soundObj=$ <br>('<bgsound volume ="-10000" loop="1" src="' this.profile.src '">').appendTo('body');<br> //-10000 est la valeur minimale du volume. Baissez d'abord le volume au minimum, afin de ne pas émettre de bruit sourd dès le chargement, ce qui pourrait effrayer les gens. <br> }else{<br> this.soundObj=$('<audio preload="auto" autobuffer><br><source src="' this.profile.src '" /><br>&lt ;source src="' this.profile.altSrc '" /><br></audio>').appendTo('body');<br> } <br> } <br> },<br> setSrc:function(src,altSrc){<br> this.profile.src=src;<br> if(typeof altSrc!='undefined'){<br> this.profile.altSrc=altSrc;<br> } <br> this._setSrc();<br> },<br> play:function(){<br> if(this.soundObj){<br> if(this.isIE){<br> this.soundObj[0 ].volume = 1; //Active le volume. <br> this.soundObj[0].src = this.profile.src;<br> }else{<br> this.soundObj[0].play();<br> }<br> }<br> } <br>};<br>var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});<br>$('.fui-btn').bind( 'cliquez',fonction(e){<br> sd.play();<br>}); <br></script>