Komentar: Artikel ini terutama memperkenalkan contoh menambahkan efek suara ke halaman web HTML5 Anda. Teman yang membutuhkannya bisa merujuknya.
Menambahkan suara yang tepat ke interaksi sering meningkatkan pengalaman pengguna. Di jendela yang kami kenal, suara membersihkan kertas parut di tempat sampah daur ulang adalah contoh yang baik.
Berikut adalah widget yang menggunakan HTML5 dan JQuery untuk menambahkan efek suara ke halaman (cukup tambahkan efek suara, bukan pemain).
Bahkan, sangat sederhana, ini adalah menggunakan tag audio di HTML5 untuk memutar suara. Namun, untuk mengurus IE 6-8, saya masih menggunakan bgsound.
Kompatibel dengan semua browser arus utama (non-mainstream tidak dipertimbangkan)
Lebih sedikit gosip, tambahkan kode:
<a href = "#"> mainkan </a>
<script>
/*Mainkan Komponen Suara*/
/*
* profil: json, {src: 'chimes.wav', altsrc: '', loop: false}
*
* setSrc: fungsi, atur sumber suara
* Mainkan: Fungsi, Mainkan Suara
*/
if (! fui) {
var fui = {};
}
Fui.soundComponent = function (profile) {
this.profile = {
SRC: '', // Alamat file audio
Altsrc: '', // Alamat file audio alternatif (format audio yang didukung oleh browser yang berbeda berbeda, lihat tabel terlampir)
loop: false // apakah akan bermain loop, parameter ini tidak berguna sekarang
};
if (profile) {
$ .Extend (this.profile, profil);
}
this.soundobj = null;
this.isie =!-[1,];
/*Metode ini diciptakan oleh pendahulu, menggunakan JScript di IE dan non -e untuk memproses perbedaan antara koma terakhir dari array,
Namun, untuk IE 9, metode ini tidak valid, tetapi tepat bagi saya untuk menggunakannya karena IE 9 mendukung 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;
}kalau tidak{
this.soundobj [0] .innerHtml = '<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" /> ';
}
}kalau tidak{
if (this.isie) {
this.soundobj = $
('<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'). appendTo ('body');
//-10000 adalah volume minimum. Putar volume ke level terendah terlebih dahulu, agar tidak membuat suara jingle segera setelah memuat, yang akan menakuti orang.
}kalau tidak{
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! = 'tidak terdefinisi') {
this.profile.altsrc = altsrc;
}
this._setsrc ();
},
play: function () {
if (this.soundobj) {
if (this.isie) {
this.soundobj [0] .volume = 1; // Buka volume.
this.soundobj [0] .src = this.profile.src;
}kalau tidak{
this.soundobj [0] .play ();
}
}
}
};
var sd = fui.soundComponent baru ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. FUI-BTN'). Bind ('Click', function (e) {
SD.Play ();
});
</script>