ความคิดเห็น: บทความนี้ส่วนใหญ่แนะนำตัวอย่างของการเพิ่มเอฟเฟกต์เสียงลงในหน้าเว็บ HTML5 ของคุณ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
การเพิ่มเสียงที่เหมาะสมในการโต้ตอบมักจะช่วยเพิ่มประสบการณ์ผู้ใช้ ในหน้าต่างที่เราคุ้นเคยเสียงของการล้างกระดาษหั่นฝอยในถังรีไซเคิลเป็นตัวอย่างที่ดี
นี่คือวิดเจ็ตที่ใช้ HTML5 และ JQuery เพื่อเพิ่มเอฟเฟกต์เสียงลงในหน้า (เพียงเพิ่มเอฟเฟกต์เสียงไม่ใช่ผู้เล่น)
ในความเป็นจริงมันง่ายมากคือใช้แท็กเสียงใน HTML5 เพื่อเล่นเสียง อย่างไรก็ตามเพื่อดูแล IE 6-8 ฉันยังคงใช้ BGSOUND
เข้ากันได้กับเบราว์เซอร์กระแสหลักทั้งหมด (ไม่ได้พิจารณาว่าไม่ใช่กระแสหลัก)
ซุบซิบน้อยลงเพิ่มรหัส:
<a href = "#"> เล่น </a>
<script>
/*เล่นองค์ประกอบเสียง*/
-
* โปรไฟล์: JSON, {src: 'chimes.wav', altsrc: '', loop: false}
-
* setSRC: ฟังก์ชั่นตั้งแหล่งที่มาของเสียง
* เล่น: ฟังก์ชั่นเล่นเสียง
-
ถ้า (! fui) {
var fui = {};
-
fui.soundComponent = function (โปรไฟล์) {
this.profile = {
SRC: '', // ที่อยู่ไฟล์เสียง
ALTSRC: '', // ที่อยู่ไฟล์เสียงทางเลือก (รูปแบบเสียงที่รองรับโดยเบราว์เซอร์ที่แตกต่างกันนั้นแตกต่างกันดูตารางที่แนบมา)
ลูป: เท็จ // ว่าจะเล่นลูปพารามิเตอร์นี้ไม่มีประโยชน์ในขณะนี้
-
ถ้า (โปรไฟล์) {
$ .extend (this.profile, โปรไฟล์);
-
this.soundobj = null;
this.isie =!-[1,];
/*วิธีนี้ถูกคิดค้นโดยรุ่นก่อนโดยใช้ JScript ใน IE และ Non -I เพื่อประมวลผลความแตกต่างระหว่างเครื่องหมายจุลภาคสุดท้ายของอาร์เรย์
อย่างไรก็ตามสำหรับ 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+'" />
<ต้นทาง src = "'+this.profile.altsrc+'" /> ';
-
}อื่น{
ถ้า (this.isie) {
this.soundobj = $
('<bgsound volume = "-10,000" loop = "1" src = "'+this.profile.src+'">'). ภาคผนวก ('ร่างกาย');
//-10,000 เป็นปริมาตรขั้นต่ำ เปลี่ยนระดับเสียงให้อยู่ในระดับต่ำสุดก่อนเพื่อไม่ให้เสียงกริ๊งทันทีที่โหลดซึ่งจะทำให้ผู้คนกลัว
}อื่น{
this.soundobj = $ ('<audio preload = "Auto" Autobuffer>
<Source Src = "'+this.profile.src+'" />
<Source Src = "'+this.profile.altsrc+'" />>
</audio> '). ภาคผนวก (' ร่างกาย ');
-
-
-
setsrc: ฟังก์ชัน (src, altsrc) {
this.profile.src = src;
if (typeof altsrc! = 'undefined') {
this.profile.altsrc = altsrc;
-
this._SetSrc ();
-
เล่น: ฟังก์ชั่น () {
if (this.soundobj) {
ถ้า (this.isie) {
this.soundobj [0] .volume = 1; // เปิดระดับเสียง
this.soundobj [0] .src = this.profile.src;
}อื่น{
this.soundobj [0] .play ();
-
-
-
-
var sd = ใหม่ fui.soundComponent ({src: 'ding.wav', altsrc: 'ding.mp3'});
$ ('. fui-btn'). ผูก ('คลิก', ฟังก์ชั่น (e) {
sd.play ();
-
</script>