Beispiel für das Hinzufügen von Soundeffekten zu Ihrer HTML5-Webseite_HTML5-Tutorial-Tipps

Das Hinzufügen geeigneter Soundeffekte zu Interaktionen verbessert oft das Benutzererlebnis. In den Fenstern, die wir kennen, ist das zerfetzende Geräusch beim Leeren des Papierkorbs ein gutes Beispiel.
Das Folgende ist eine kleine Komponente, die HTML5 und Jquery verwendet, um Soundeffekte zur Seite hinzuzufügen (es werden nur Soundeffekte hinzugefügt, kein Player).
Es ist eigentlich ganz einfach: Verwenden Sie einfach das Audio-Tag in HTML5, um Sounds abzuspielen. Um den IE 6-8 zu unterstützen, wird jedoch weiterhin bgsound verwendet.
Kompatibel mit allen gängigen Browsern (Nicht-Mainstream-Browser werden nicht berücksichtigt)
Genug geredet, hier ist der Code:

Code kopieren

Der Code lautet wie folgt:

Play
<script><br />/*Soundkomponente abspielen*/<br />/*<br /> * Profil: JSON, {src:' chimes. wav',altSrc:'',loop:false}<br /> * <br /> * setSrc: Funktion, Tonquelle einstellen<br /> * play: Funktion, Ton abspielen<br /> */<br />if (! FUI){<br /> var FUI = {};<br />}<br />FUI.soundComponent=function(profile){<br /> this.profile={<br /> src:'', //Audiodatei Adresse<br /> altSrc:'', // Alternative Audiodateiadresse (verschiedene Browser unterstützen unterschiedliche Audioformate, siehe beigefügte Tabelle) <br /> loop:false // Ob die Wiedergabe wiederholt werden soll, dieser Parameter wird jetzt nicht verwendet <br /> } ;<br /> if(profile) {<br /> $.extend(this.profile,profile);<br /> }<br /> this.soundObj=null;<br /> this.isIE = !-[1,] ; <br /> /*Diese Methode wurde von einem erfahrenen Experten erfunden. Sie nutzt den Unterschied zwischen JScript im IE und Nicht-IE, um das letzte Komma "," des Arrays zu verarbeiten ist ungültig, aber hier ist der richtige Weg. Es funktioniert bei mir, weil IE 9 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 ist der Mindestwert des Volumens. Stellen Sie die Lautstärke zunächst auf das Minimum ein, damit es beim Laden nicht zu einem klingelnden Geräusch kommt, das andere verängstigen könnte. <br /> }else{<br /> this.soundObj=$('<audio preload="auto" autobuffer><br /><source src="' this.profile.src '" /><br />&lt ;source src="' this.profile.altSrc '" /><br />').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; //Lautstärke einschalten. <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( 'click',function(e){<br /> sd.play();<br />}); <br /></script>