HTML5 웹페이지에 음향 효과를 추가하는 예_html5 튜토리얼 팁

상호작용에 적절한 음향 효과를 추가하면 사용자 경험이 향상되는 경우가 많습니다. 우리에게 익숙한 창에서는 휴지통을 비우는 파쇄음이 좋은 예이다.
다음은 HTML5와 Jquery를 사용하여 페이지에 음향 효과를 추가하는 작은 구성 요소입니다(플레이어가 아닌 음향 효과만 추가함).
실제로는 매우 간단합니다. HTML5의 audio 태그를 사용하여 사운드를 재생하면 됩니다. 그러나 IE 6-8을 처리하기 위해 bgsound는 여전히 사용됩니다.
모든 주요 브라우저와 호환 가능(비주류 브라우저는 고려되지 않음)
자세한 내용은 이렇습니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

Play
<script><br />/*사운드 구성 요소 재생*/<br />/*<br /> * 프로필: JSON, {src:' chimes.wav',altSrc:'',loop:false}<br /> * <br /> * setSrc: 함수, 사운드 소스 설정<br /> * play: 함수, 사운드 재생<br /> */<br />if (! FUI){<br /> var FUI = {};<br />}<br />FUI.soundComponent=function(profile){<br /> this.profile={<br /> src:'', //오디오 파일 address<br /> altSrc:'', // 대체 오디오 파일 주소(다른 브라우저는 다른 오디오 형식을 지원합니다. 첨부된 표 참조) <br /> loop:false // 반복 재생 여부, 이 매개변수는 현재 사용되지 않습니다 <br /> } ;<br /> if(profile) {<br /> $.extend(this.profile,profile);<br /> }<br /> this.soundObj=null;<br /> this.isIE = !-[1,] ; <br /> /*이 방법은 IE의 JScript와 비 IE의 차이점을 사용하여 배열의 마지막 쉼표 ","를 처리합니다. <br /> 그러나 IE 9의 경우 이 방법은 다음과 같습니다. 유효하지 않지만 올바른 방법은 다음과 같습니다. IE 9가 audio*/<br /> this.init();<br />};<br />FUI.soundComponent.prototype={<br /> init:function을 지원하기 때문에 저에게 효과적입니다. (){<br /> this._setSrc ();<br /> }, <br /> _setSrc:function(){<br /> if(this.soundObj){ <br /> if(this.isIE){<br /> this .soundObj[0].src=this .profile.src; <br /> }else{<br /> this.soundObj[0].innerHTML='<source src="' this.profile.src '" /> <br /><source src=" ' this.profile.altSrc '" />'; <br /> } <br /> }else{<br /> if(this.isIE){<br /> this.soundObj=$ <br />('<bgsound 볼륨 ="-10000" loop="1" src="' this.profile.src '">').appendTo('body');<br /> //-10000은 볼륨의 최소값. 사람들이 겁을 먹을 수 있는 로딩과 동시에 딩 소리가 나지 않도록 먼저 볼륨을 최소로 낮추십시오. <br /> }else{<br /> this.soundObj=$('<audio preload="auto" autobuffer><br /><source src="' this.profile.src '" /><br />&lt ;source src="' this.profile.altSrc '" /><br />').appendTo('body');<br /> } <br /> } <br /> },<br /> setSrc:function(src,altSrc){<br /> this.profile.src=src;<br /> if(typeof altSrc!='undefine'){<br /> this.profile.altSrc=altSrc;<br /> } <br /> this._setSrc();<br /> },<br /> play:function(){<br /> if(this.soundObj){<br /> if(this.isIE){<br /> this.soundObj[0 ].volume = 1; //볼륨을 켭니다. <br /> this.soundObj[0].src = this.profile.src;<br /> }else{<br /> this.soundObj[0].play();<br /> }<br /> }<br /> } <br />};<br />var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});<br />$('.fui-btn').bind( '클릭',function(e){<br /> sd.play();<br />}) <br /></script>