Maison > interface Web > Tutoriel H5 > Exemple d'ajout d'effets sonores à votre page Web HTML5_html5 conseils du didacticiel

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

WBOY
Libérer: 2016-05-16 15:48:15
original
1839 Les gens l'ont consulté

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>
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal