تعليق: يقدم هذا المقال مثالًا على إضافة المؤثرات الصوتية إلى صفحة الويب HTML5 الخاصة بك. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
غالبًا ما يؤدي إضافة الصوت الصحيح إلى التفاعل إلى تحسين تجربة المستخدم. في النوافذ التي نتعرف عليها ، يعد صوت مسح الورق المبشور في سلة إعادة التدوير مثالًا جيدًا.
فيما يلي عنصر واجهة مستخدم يستخدم HTML5 و jQuery لإضافة مؤثرات صوتية إلى الصفحة (فقط أضف المؤثرات الصوتية ، وليس لاعبًا).
في الواقع ، الأمر بسيط للغاية ، فهو استخدام علامات الصوت في HTML5 لتشغيل الأصوات. ومع ذلك ، من أجل رعاية IE 6-8 ، ما زلت أستخدم BGSound.
متوافق مع جميع المتصفحات السائدة (لا يعتبر غير المسلسل))
أقل ثرثرة ، أضف الرمز:
<a href = "#"> play </a>
<script>
/*تشغيل مكون الصوت*/
/*
* ملف تعريف: json ، {src: 'chimes.wav' ، altsrc: '' ، حلقة: false}
*
* setsrc: وظيفة ، اضبط مصدر الصوت
* اللعب: وظيفة ، تشغيل الصوت
*/
إذا (! fui) {
var fui = {} ؛
}
fui.soundcomponent = function (ملف تعريف) {
this.profile = {
SRC: '' ، // عنوان ملف الصوت
ALTSRC: '' ، // عنوان ملف الصوت البديل (تنسيقات الصوت التي تدعمها متصفحات مختلفة مختلفة ، انظر الجدول المرفق)
الحلقة: false // ما إذا كنت تريد اللعب ، هذه المعلمة ليست مفيدة الآن
} ؛
إذا (ملف تعريف) {
$ .extend (this.profile ، profile) ؛
}
this.soundobj = null ؛
this.isie =!-[1 ،] ؛
/*تم اختراع هذه الطريقة من قبل سلف ، باستخدام JScript في IE و NON IE لمعالجة الفرق بين الفاصلة الأخيرة من المصفوفة ،
ومع ذلك ، بالنسبة إلى IE 9 ، فإن هذه الطريقة غير صالحة ، ولكن من المناسب بالنسبة لي استخدامها لأن IE 9 يدعم الصوت*/
this.init () ؛
} ؛
fui.soundcomponent.prototype = {
init: function () {
this._setsrc () ؛
} ،
_setsrc: function () {
if (this.soundobj) {
إذا (this.isie) {
this.soundobj [0] .Src = this.profile.src ؛
}آخر{
this.soundobj [0] .innerhtml = '<source src = "'+this.profile.src+'" />
<source src = "'+this.profile.altsrc+'" /> '؛
}
}آخر{
إذا (this.isie) {
this.soundobj = $
('<bgsound volume = "-10000" loop = "1" src = "'+this.profile.src+'">'). appendto ('body') ؛
//-10000 هو الحد الأدنى للحجم. حوّل مستوى الصوت إلى أدنى مستوى أولاً ، حتى لا يصنع صوت Jingle بمجرد تحميله ، والذي سيخيف الناس.
}آخر{
this.soundobj = $ ('<audio preload = "auto" autobuffer>
<المصدر src = "'+this.profile.src+'" />
<المصدر src = "'+this.profile.altsrc+'" />
</uadio> '). 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) {
إذا (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>