댓글 : HTML5 오디오 요소 jQuery 플러그인을 기반으로 한 사운드를 재생하십시오. 필요한 친구는 그것을 참조 할 수 있습니다.
1. 앞으로 일부 잔그링내가 꿈꾸는 대학에 있었을 때 플래시 웹 사이트는 약간 인기있는 것처럼 보였고 약간의 콘텐츠가있는 플래시 사이트에서 다양한 음향 효과는 항상 필수 불가결했습니다. 음향 효과 중 일부는 분위기를 조성하는 배경 음악이며, 다른 부분은 버튼을 누르거나 지나갈 때 경고 또는 윙윙 거리는 것과 같은 상호 작용을 촉진하고 경험을 향상시키는 대화식 사운드입니다. 그 당시 플래시에서 멀리 떨어진 웹 페이지에 사운드 상호 작용이 거의 없었습니다. 비록 컨트롤의 도움을 받거나 플래시와 상호 작용함으로써 호환성을 달성해야하더라도.
마르크스는 우리에게 사물이 발달한다고 말하고, 소녀들은 언젠가는 젊은 여성이 될 것이며 기술도 마찬가지입니다. 예를 들어, Mozilla CEO Gary Kwicks는 오늘 Firefox 5가 6 월 22 일에 공식적으로 발표 될 것이라고 Firefox 4가 출시 된 지 3 개월 만에 공식적으로 발표 될 것이라고 밝혔다. HTML5의 발전과 인기로 인해 이전에 플래시로 달성 된 많은 효과는 이제 웹 페이지에서 쉽게 구현할 수 있습니다. 예를 들어 오디오 파일의 재생. 이 기사는 재미있게 만들어서 HTML5 오디오 요소를 기반으로 jQuery에서 요소 호버가 쉽게 달성 할 때 소리를 재생하는 효과가 있습니다. 따라서이 기사 와이 플러그인에 관한 한, IE6 ~ 8은 간장을 만들고 따뜻하게 유지하기 위해 그룹을 들고있는 삶입니다.
2. 효과, 자원 및 사용
블라인드 데이트와 마찬가지로 상대방의 모습에 매우 중요합니다. 따라서 Lushan의 진정한 얼굴을 엿볼 수 있으시면 여기를 클릭하십시오. Sound jQuery 플러그인 데모를 재생하십시오.
데모에서 다음과 유사한 수직 내비게이션을 볼 수 있습니다.
마우스가 빨리 움직일 때 내비게이션의 첫 번째 물결은 내 마음 속의 어머니의 부름과 마찬가지로 항상 하나의 소리가 나올 것입니다. 마우스가 빠르게 움직이고 아래의 탐색은 내 마음 속에 많은 우상의 부름과 마찬가지로 폭죽과 같은 여러 사운드로 재생됩니다.
이 jQuery 플러그인은 매우 간단하고 매우 작습니다. 약 30 위안이므로 왜 대공포를 사용하여 모기와 싸우는가? 그래서 나는 그것을 포장하지 않을 것입니다. 스크립트에 관심이 있으시면 마우스 오른쪽 버튼을 클릭 할 수 있습니다-[대상 | 링크] 다음 링크로 저장하십시오 : jQuery-audioplay.js
사용
먼저 다음과 같이 jQuery 라이브러리 와이 효과 스크립트 파일을 호출하십시오.
<script type = text/javaScript src => </script> _FCKSAVEDURL => </script> _FCKSAVEDURL => </script> _FCKSAVEDURL => </script>
<script type = text/javaScript src => </script>
그런 다음 마우스가 소리를 연주하도록 요구하는 요소를 바인딩하십시오. 메소드 이름은 다음과 같습니다. AudiopLay () 예를 들어 다음은 데모 페이지에서 사용됩니다.
$ ( "#nav li"). AudiopLay ({{
이름 : "Playonce",
urlmp3 : "/study/media/beep.mp3",
urlogg : "/study/media/beep.ogg"
});
분명히 오디오 파일 소스 없이는 소리를 재생할 수 없으므로 오디오 주소는 매개 변수에서 필수 불가결합니다. 특정 매개 변수 및 관련 지침은 아래 표를 참조하십시오.
기본 매개 변수 정의
그룹화에 사용되는 Nameaudioplay String. 페이지에 동시에 여러 플레이 요소 그룹이있을 때 사용됩니다.
URLMP3 문자열이라면이 매개 변수는 있어야합니다. MP3 형식의 오디오 파일 주소를 나타냅니다.
Urlogg String,이 매개 변수는 있어야합니다. OGG 형식의 오디오 파일 주소를 나타냅니다.
Clonefalse 부울 유형. 동일한 요소 그룹이 동일한 음원을 재생하는지 여부.
참고 : Firefox 및 Opera 브라우저는 OGG 형식 오디오를 지원하는 반면 WebKit Core 브라우저 및 IE는 MP3 형식 오디오를 지원합니다.
데모 페이지에서 두 그룹의 내비게이션 그룹의 음향 효과는 위의 모든 매개 변수를 적용하며 다음과 같이 완전히 사용됩니다.
$ (function () {
$ ( "#nav li"). AudiopLay ({{
이름 : "Playonce",
urlmp3 : "/study/media/beep.mp3",
urlogg : "/study/media/beep.ogg"
});
$ ( "#nav2 li"). AudiopLay ({{
urlmp3 : "/study/media/beep.mp3",
urlogg : "/study/media/beep.ogg",
클론 : 사실
});
});
3. 일부 잔소리
이제 HTML5 오디오 요소를 지원하는 브라우저는 다음과 같습니다. Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+. 우리의 마법의 나라에서 IE6 ~ 8은 여전히 대부분의 세계를 차지하고 있습니다. 이 기사의 것들은 여전히 가치가 없다고 생각할 수 있습니다.
그러나 점진적인 향상의 원칙에 따라 유틸리티 및 자원 점령의 무게를 측정하는 경우 실제 프로젝트 에서이 기사 에이 작은 것을 적용하는 것도 불가능하지 않습니다. 또한 Windows 7의 설치량이 크게 증가함에 따라 IE6 ERA는 우연히 갑자기 끝났을 수 있습니다. 그때까지, 당신이 그것을 보충하기에는 너무 늦지 않을 수 있습니다. 이 느낌은 60 년대 또는 70 년대에있는 나의 현재 집주인에게서 나옵니다. 그는 기본적으로 컴퓨터에 대해 아무것도 모르지만 (주식을 보면) 그의 컴퓨터는 화려하고 아름답고 Windows 7 시스템을 사용하는 것이 매우 흥미로운 것 같습니다.
프론트 엔드 기술의 조수를 활용하여 기본 기술을 연습하기 위해 열심히 노력해야합니다. 그렇지 않으면 조수가 오면 신기술이 급증하는 새로운 기술로 쉽게 삼킬 것입니다. 개인적으로, 나는 지진 이후 일본과 같다고 생각하고 거대한 쓰나미가 올 것입니다 ...
테스트 코드 포장 및 다운로드