HTML5 오디오 element_html5 튜토리얼 기술을 기반으로 사운드 jQuery 플러그인 재생

1. 이전 잡담 중 일부
제가 대학 다닐 때 플래시 사이트는 아직 조금 인기가 있었던 것 같고, 어떤 컨텐츠가 있는 플래시 사이트라면 항상 잡다한 음향 효과가 필수였던 것 같습니다. 음향 효과의 일부는 분위기를 높이는 배경 음악이고, 다른 일부는 버튼 누름이나 지나갈 때의 "삐" 또는 "삐" 소리와 같이 상호 작용을 촉진하고 경험을 향상시키는 대화형 사운드입니다. 당시에는 웹페이지에서 Flash와는 거리가 먼 사운드 상호작용이 거의 없었습니다. 설사 호환성을 확보하려면 컨트롤에 의존하거나 Flash와 상호작용해야 했습니다(예를 들어 제가 구현하기 전에 작성한 정신지체 게임). 목표물을 타격하는 중성자 폭탄의 폭발음).

마르크스는 모든 것이 발전한다고 말했습니다. 소녀들은 언젠가 젊은 여성이 될 것이며 기술도 마찬가지입니다. 예를 들어, Mozilla CEO인 Gary Kwicks는 오늘 Firefox 5가 Firefox 4가 출시된 지 불과 3개월 후인 6월 22일에 공식적으로 출시될 것이라고 밝혔습니다. 보려면 클릭하세요. HTML5의 발전과 대중화로 인해 과거에는 플래시를 통해서만 얻을 수 있었던 많은 효과를 이제 웹페이지에서도 쉽게 얻을 수 있게 되었습니다. 예를 들어, 오디오 파일 재생. 이 글은 HTML5 오디오 요소를 기반으로 요소가 호버할 때 사운드가 재생되는 효과를 쉽게 구현하기 위한 약간의 트릭입니다. 따라서 이 글과 이 플러그인에 관한 한 IE6~8은 그저 그렇습니다. 엉망.

2. 효과, 리소스 및 사용법
소개팅과 마찬가지로 상대방의 모습도 매우 중요하므로 루산의 진짜 모습을 살짝 보고 싶다면 클릭하시면 됩니다 여기: 사운드 재생 jQuery Mini 플러그인 데모

데모에서 다음과 유사한 수직 탐색을 볼 수 있습니다.

마우스로 첫 번째 탐색 물결을 빠르게 이동하고, 그리고 항상 마음속의 어머니처럼 오직 하나의 목소리만이 연주될 것입니다. 쥐의 부름, 쥐가 빠르게 움직이는 동안, 아래에서 탐색의 물결, 폭죽처럼 삐걱거리는 여러 소리, 마치 수많은 우상들의 울음소리처럼. 마음.

이 jQuery 플러그인은 매우 간단하고 매우 작습니다. 비용은 약 30위안입니다. 대공포를 사용하여 모기를 퇴치할 수는 없으므로 포장하지 않겠습니다. 스크립트에 관심이 있다면 다음 링크를 따라 "마우스 오른쪽 버튼을 클릭 - [대상 | 링크] 다른 이름으로 저장"할 수 있습니다: jquery-audioPlay.js


를 사용하여 먼저 jQuery 라이브러리를 호출하고 이 다음 코드에 표시된 대로 효과 스크립트 파일:
_fcksavedurl=""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">" _fcksavedurl= ""http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">

그런 다음 마우스가 지나갈 때 소리를 재생하도록 하는 요소를 바인딩하면 됩니다. 메소드 이름은 audioPlay()입니다. 예를 들어 데모 페이지에서는 다음이 사용됩니다.

코드 복사

코드는 다음과 같습니다:

$("#nav li").audioPlay({
name: "playOnce",
urlMp3: "/study/media/beep. mp3",
urlOgg: " /study/media/beep.ogg"
});

분명히 사운드를 재생하는 것은 오디오 파일 소스 없이는 불가능하므로 매개변수의 오디오 주소는 필수입니다. 특정 매개변수 관련 지침은 아래 표를 참조하세요.

参数	默认	释义
name	“audioPlay”	字符串，用来分组的。用在页面上同时有多组播放元素时。
urlMp3	“”	字符串，此参数必须。指mp3格式的音频文件地址。
urlOgg	“”	字符串，此参数必须。指ogg格式的音频文件地址。
clone	false	布尔型。同一组元素是否播放同一个声源。

참고: Firefox 및 Opera 브라우저는 OGG 형식 오디오를 지원하고, 웹킷 코어 브라우저 및 IE는 MP3 형식 오디오를 지원합니다.

데모 페이지의 상단 및 하단 탐색 그룹의 음향 효과는 위의 매개변수를 모두 적용하며 전체 사용법은 다음과 같습니다.

복사 code

코드는 다음과 같습니다.

$(function() {
$("#nav li").audioPlay({
name : "playOnce",
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg"
})
$("#nav2 li").audioPlay({
urlMp3: "/study/media/beep.mp3",
urlOgg: "/study/media/beep.ogg",
clone: ​​​​true
});
});

3. 끝부분 잔소리
현재 HTML5 오디오 요소를 지원하는 브라우저는 다음과 같습니다: Firefox 3.5, Chrome 3, Opera 10.5, Safari 4, IE 9, 그리고 이 마법의 나라 인터넷에서는 여전히 IE6~8이 대부분의 국가를 차지하고 있습니다. 이 기사에 나오는 내용은 현재로서는 여전히 별 가치가 없다고 느낄 수 있습니다.

그러나 점진적 향상의 원칙을 바탕으로 효용성과 자원 활용도를 중시하므로 이 글에서 소개한 이 작은 내용을 실제 프로젝트에 적용해 보는 것도 나쁘지는 않다. 더욱이, Windows 7의 설치 용량이 크게 증가함에 따라 IE6의 시대가 갑자기 끝나게 될 수도 있습니다. 그때쯤이면 만회하기에는 너무 늦지 않을 수도 있습니다. 이 감정은 60~70세의 현 주인 아주머니에게서 나온 것입니다. 기본적으로 컴퓨터에 대해 아무것도 모르지만(주식을 읽는 데만 사용함) 그녀의 컴퓨터는 멋진 Windows 7이며 Windows를 사용할 수 있는 것 같습니다. 7 시스템은 꽤 감동적입니다.

프런트엔드 기술의 큰 물결이 오기 전에 기본적인 기술을 열심히 연습해야 합니다. 그렇지 않으면 큰 물결이 다가올 때 다가오는 새로운 기술에 쉽게 흡수될 것입니다. 개인적으로 지진 직후 일본처럼 거대한 쓰나미가 오고 있다는 느낌이 듭니다...
테스트 코드 패키지 다운로드