Contoh menambah kesan bunyi pada halaman web html5 anda_html5 petua tutorial

Menambah kesan bunyi yang sesuai pada interaksi selalunya meningkatkan pengalaman pengguna. Di dalam tingkap yang biasa kita dengar, bunyi carik mengosongkan Tong Kitar Semula adalah contoh yang baik.
Berikut ialah komponen kecil yang menggunakan HTML5 dan Jquery untuk menambah kesan bunyi pada halaman (ia hanya menambah kesan bunyi, bukan pemain).
Ia sebenarnya sangat mudah, hanya gunakan teg audio dalam HTML5 untuk memainkan bunyi. Walau bagaimanapun, untuk menjaga IE 6-8, bgsound masih digunakan.
Serasi dengan semua penyemak imbas utama (pelayar bukan arus perdana tidak dipertimbangkan)
Cukup sembang, berikut kodnya:

Salin kod

Kodnya adalah seperti berikut:

Main

/*Mainkan komponen bunyi*/
/*
* profil: JSON, {src:' loceng. wav',altSrc:'',loop:false}
*
* setSrc: Fungsi, tetapkan sumber bunyi
* main: Fungsi, mainkan bunyi
*/
jika (! FUI){
var FUI = {};
}
FUI.soundComponent=function(profile){
this.profile={
src:'', //Fail audio alamat
altSrc:'', // Alamat fail audio alternatif (pelayar berbeza menyokong format audio yang berbeza, lihat jadual yang dilampirkan)
gelung:false // Sama ada hendak menggelung main balik, parameter ini tidak digunakan sekarang
} ;
if(profil) {
$.extend(this.profile,profile);
}
this.soundObj=null;
this.isIE = !-[1,] ;
/*Kaedah ini dicipta oleh pakar kanan Ia menggunakan perbezaan antara JScript dalam IE dan bukan IE untuk mengendalikan koma terakhir
Walau bagaimanapun, untuk IE 9, kaedah ini adalah tidak sah, tetapi inilah cara yang betul Ia berfungsi untuk saya kerana IE 9 menyokong 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;
}lain{
this.soundObj[0].innerHTML='
';
}
}lain{
if(this.isIE){
this.soundObj=$
('').appendTo('body');
//-10000 ialah nilai minimum isipadu. Kecilkan kelantangan kepada minimum terlebih dahulu, supaya tidak mengeluarkan bunyi ding sebaik sahaja ia dimuatkan, yang mungkin menakutkan orang ramai.
}lain{
this.soundObj=$('').appendTo('body');
}
}
},
setSrc:function(src,altSrc){
this.profile.src=src;
if(typeof altSrc!='undefined'){
this.profile.altSrc=altSrc;
}
this._setSrc();
},
play:function(){
if(this.soundObj){
if(this.isIE){
this.soundObj[0 ].volume = 1; //Hidupkan kelantangan.
this.soundObj[0].src = this.profile.src;
}lain{
this.soundObj[0].play();
}
}
}
};
var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});
$('.fui-btn').bind( 'klik',fungsi(e){
sd.play();
});