コメント：この記事では、主にHTML5 Webページにサウンドエフェクトを追加する例を紹介します。それを必要とする友達はそれを参照できます。
相互作用に適切な音を追加すると、ユーザーエクスペリエンスが改善されることがよくあります。私たちがよく知っている窓では、リサイクルビンの細かい紙をクリアする音が良い例です。
これは、HTML5とjQueryを使用してページにサウンドエフェクトを追加するウィジェットです（プレーヤーではなくサウンドエフェクトを追加するだけです）。
実際、それは非常に簡単です。HTML5のオーディオタグを使用してサウンドを再生することです。ただし、IE 6-8の世話をするためには、BGSoundを使用していました。
すべての主流のブラウザと互換性があります（非メインストリームは考慮されません）
ゴシップが少なく、コードを追加します。
<a href = "＃"> play </a>
<スクリプト>
/*サウンドコンポーネントを再生*/
/*
*プロフィール：json、{src： 'chimes.wav'、altsrc： ''、loop：false}
*
* setSrc：機能、音の源を設定します
*再生：機能、再生サウンド
*/
if（！fui）{
var fui = {};
}
fui.soundComponent = function（formal）{
this.profile = {
SRC： ''、//オーディオファイルアドレス
altsrc： ''、//代替オーディオファイルアドレス（さまざまなブラウザでサポートされるオーディオ形式は異なります。添付のテーブルを参照）
ループ：false //ループを再生するかどうか、このパラメーターは今は役に立ちません
};
if（profile）{
$ .extend（this.profile、profile）;
}
this.soundobj = null;
this.isie =！ - [1、];
/*この方法は、IEと非IIのJScriptを使用して、配列の最後のコンマの違いを処理する前任者によって発明されました。
ただし、IE 9の場合、この方法は無効ですが、IE 9がAudio*/をサポートしているため、使用するのはちょうどいいです
this.init（）;
};
fui.soundcomponent.prototype = {
init：function（）{
this._setsrc（）;
}、
_setsrc：function（）{
if（this.soundobj）{
if（this.isie）{
this.soundobj [0] .src = this.profile.src;
}それ以外{
this.soundobj [0] .innerhtml = '<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" /> ';
}
}それ以外{
if（this.isie）{
this.soundobj = $
（ '<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'）。appendto（ 'body'）;
// -10000は最小ボリュームです。ボリュームを最初に最低レベルに変えます。これは、荷物を積みながらジングルサウンドを作らないようにして、人々を怖がらせます。
}それ以外{
this.soundobj = $（ '<audio preload = "auto" autobuffer>
<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" />
</audio> '）。appendto（' body '）;
}
}
}、
setSrc：function（src、altsrc）{
this.profile.src = src;
if（typeof altsrc！= 'undefined'）{
this.profile.altsrc = altsrc;
}
this._setsrc（）;
}、
再生：function（）{
if（this.soundobj）{
if（this.isie）{
this.soundobj [0] .volume = 1; //ボリュームを開きます。
this.soundobj [0] .src = this.profile.src;
}それ以外{
this.soundobj [0] .play（）;
}
}
}
};
var sd = new fui.soundComponent（{src： 'ding.wav'、altsrc： 'ding.mp3'}）;
$（'。fui-btn '）。bind（' click '、function（e）{
sd.play（）;
}）;
</script>