댓글 :이 기사는 주로 HTML5 웹 페이지에 음향 효과를 추가하는 예를 소개합니다. 필요한 친구는 그것을 참조 할 수 있습니다.
상호 작용에 올바른 사운드를 추가하면 종종 사용자 경험이 향상됩니다. 우리가 익숙한 창문에서는 재활용 쓰레기통에 파쇄 된 종이를 비우는 소리가 좋은 예입니다.
다음은 HTML5 및 JQuery를 사용하여 페이지에 음향 효과를 추가하는 위젯입니다 (플레이어가 아닌 음향 효과 만 추가).
실제로 매우 간단합니다. HTML5의 오디오 태그를 사용하여 사운드를 재생하는 것입니다. 그러나 IE 6-8을 돌보기 위해 여전히 BGSound를 사용했습니다.
모든 주류 브라우저와 호환됩니다 (비 메인 스트림이 고려되지 않음)
가십이 적고 코드를 추가하십시오.
<a href = "#"> Play </a>
<cript>
/*사운드 구성 요소 재생*/
/*
* 프로필 : JSON, {SRC : 'Chimes.Wav', altsrc : '', loop : false}
*
* setsrc : 함수, 사운드 소스를 설정하십시오
* 재생 : 기능, 소리를 재생합니다
*/
if (! fui) {
var fui = {};
}
fui.soundcomponent = function (profile) {
this.profile = {
SRC : '', // 오디오 파일 주소
altsrc : '', // 대체 오디오 파일 주소 (다른 브라우저에서 지원되는 오디오 형식은 다르므로 첨부 된 테이블 참조)
루프 : false // 루프 재생 여부,이 매개 변수는 지금 유용하지 않습니다.
};
if (프로필) {
$ .extend (this.profile, profile);
}
this.soundobj = null;
this.isie =!-[1,];
/*이 방법은 이전 모델이 IE와 Nonie의 JScript를 사용하여 배열의 마지막 쉼표의 차이를 처리하여 전임자에 의해 발명되었습니다.
그러나 IE 9의 경우이 방법은 유효하지 않지만 IE 9가 오디오를 지원하기 때문에 사용하는 것이 옳습니다.*/
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 = '<소스 src = "'+this.profile.src+'" />
<소스 src = " '+this.profile.altsrc+'" /> ';
}
}또 다른{
if (this.isie) {
this.soundobj = $
( '<bgsound volume = "-10000"loop = "1"src = "'+this.profile.src+'"). 부록 ('body ');
//- 10000은 최소 볼륨입니다. 부피를 가장 낮은 레벨로 돌리십시오.
}또 다른{
this.soundobj = $ ( '<audio preload = "auto"autobuffer>
<소스 src = " '+this.profile.src+'" />
<소스 src = " '+this.profile.altsrc+'" />
</audio> ').
}
}
},
setsrc : 함수 (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 ();
});
</스크립트>