HTML5 Web ページに効果音を追加する例_html5 チュートリアルのヒント

インタラクションに適切な音響効果を追加すると、ユーザー エクスペリエンスが向上することがよくあります。私たちがよく知っている窓では、ゴミ箱を空にするときのシュレッダー音がその良い例です。
以下は、HTML5 と Jquery を使用してサウンド効果をページに追加する小さなコンポーネントです (サウンド効果のみを追加し、プレーヤーは追加しません)。
実際は非常に簡単で、HTML5 の audio タグを使用してサウンドを再生するだけです。ただし、IE 6 ～ 8 を処理するために、bgsound が引き続き使用されます。
すべての主要なブラウザと互換性があります (非主流のブラウザは考慮されていません)
おしゃべりはこれくらいにして、コードを次に示します:

コードをコピー

コードは次のとおりです:

再生
<script><br />/*サウンドコンポーネントを再生*/<br />/*<br /> * プロファイル: JSON, {src:'チャイム。wav',altSrc:'',loop:false}<br /> * <br /> * setSrc: 関数、サウンドのソースを設定します<br /> * play: 関数、サウンドを再生します<br /> */<br />if (! FUI){<br /> var FUI = {};<br />}<br />FUI.soundComponent=function(profile){<br /> this.profile={<br /> src:'', //オーディオ ファイルaddress<br /> altSrc:'', // 代替オーディオ ファイル アドレス (ブラウザごとにサポートされるオーディオ形式が異なります。添付の​​表を参照してください) <br /> loop:false // ループ再生するかどうか、このパラメータは現在使用されていません <br /> } ;<br /> if(profile) {<br /> $.extend(this.profile,profile);<br /> }<br /> this.soundObj=null;<br /> this.isIE = !-[1,] ; <br /> /*このメソッドは、IE と非 IE の JScript の違いを利用して、配列の最後のカンマ「,」を処理します。<br /> ただし、IE 9 では、このメソッドは使用されません。は無効ですが、これが正しい方法です。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 はボリュームの最小値。ロード直後に「キーン」という音が鳴り、人々を怖がらせる可能性があるので、最初は音量を最小に下げてください。 <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!='unknown'){<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; //音量をオンにします。 <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>