HTML5는 오디오 태그를 사용하여 가사 동기화 효과를 얻습니다. _html5 튜토리얼 기술

HTML5의 가장 강력한 점은 미디어 파일 처리입니다. 예를 들어 간단한 vedio 태그를 사용하여 비디오를 재생할 수 있습니다. 마찬가지로 HTML5에도 오디오 파일을 처리하기 위한 해당 태그가 있는데, 바로 오디오 태그
HTML5가 나온 지 꽤 됐는데, 그 안에 들어 있는 오디오 태그는 딱 한 번만 사용됐고, 당연히 그냥 이 태그를 페이지에 삽입하세요. 이번에는 친구가 몇 페이지를 만들고 오디오 태그를 사용하여 연습하는 것을 도와주었습니다.
먼저 페이지에 오디오 태그를 삽입해야 합니다. 여기서는 loop='loop'를 설정하지 않는 것이 가장 좋습니다. 왜냐하면 나중에ended 속성을 사용해야 할 때이기 때문입니다. 루프가 루프로 설정된 경우 종료 속성은 항상 false입니다.
autoplay='autoplay'는 로드 후 자동으로 음악을 재생하도록 페이지를 설정합니다. preload 속성과 autoplay 속성이 태그에 나타나면 preload 속성이 무시됩니다.
controls='controls'는 음악 표시를 위한 컨트롤 막대를 설정합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. <오디오 src="music/Yesterday Once More .mp3" id="aud" 자동재생="자동 재생" 컨트롤="컨트롤" 미리 로드="자동"> 
2. 귀하의 브라우저는 오디오 속성을 지원하지 않습니다. 브라우저를 변경하여 찾아보세요. 
3. 오디오> 

이 태그가 있으면 축하합니다. 이제 페이지에서 음악을 재생할 수 있습니다. 하지만 이렇게 하면 페이지가 너무 단조로워질 수 있기 때문에 페이지에 가사가 동시에 표시되고 재생할 음악도 선택할 수 있도록 페이지에 몇 가지 항목을 추가했습니다. 따라서 이 효과를 얻으려면 먼저 lrc 형식의 일부 가사 파일을 다운로드한 다음 음악 형식을 지정해야 합니다. 처음에 음악파일이 이렇게 생겼거든요

각 가사를 두 자리 배열로 삽입해야 합니다. 서식을 지정하면 가사가 다음과 같이 됩니다.
가사 서식 지정 코드는 다음과 같습니다

XML/HTML 코드클립보드에 콘텐츠 복사

1. //가사동기화 부분
2. function parLyric(text) {
3. //텍스트를 한 줄씩 분리하여 배열에 저장합니다
4. var lines = text.split('n'),
5. //시간 일치에 사용되는 정규식, 일치 결과는 [xx:xx.xx]와 유사합니다.
6. 패턴 = /[d{2}:d{2}.d{2}]/g,
7. //최종 결과를 저장하기 위한 배열
8. 결과 = []
9. //시간 없이 줄 제거
10. while (!pattern.test(lines[0])) {
11. 라인라인 = 라인.슬라이스(1)
12. }
13. //위 배열을 생성하기 위해 'n'을 사용하는 경우 결과의 마지막 요소는 빈 요소이며 여기서는 제거됩니다.
14. 라인[lines.length - 1].length === 0 && 라인.팝()
15. lines.forEach(function(v /*배열 요소 값*/ , i /*요소 인덱스*/ , a /*배열 자체*/ ) {
16. //시간 추출 [xx:xx.xx]
17. var 시간 = v.match(패턴),
18. //가사 추출
19. v값 = v.replace(pattern, '')
20. //한 줄에 여러 번 나올 수 있기 때문에 시간은 [xx:xx.xx][xx:xx.xx][xx:xx.xx] 형식일 수 있습니다. 더욱 분리되다
21. time.forEach(function(v1, i1, a1) {
22. //xx:xx.xx를 얻는 시간에서 대괄호를 제거하세요
23. var t = v1.slice(1, -1).split(':');
24. //결과를 최종 배열에 푸시
25. result.push([parseInt(t[0], 10) * 60 parseFloat(t[1]), value])
26. })
27. })
28. //마지막으로 저장 후 가사가 정상적으로 표시될 수 있도록 결과 배열의 요소를 시간순으로 정렬합니다
29. result.sort(function(a, b) {
30. a[0] - b[0] 반환
31. })
32. 반환 결과
33. }

이 시점에서 각 음악의 가사를 쉽게 사용할 수 있으며, 음악이 정상적으로 전환될 수 있도록 가사를 가져와서 페이지에 동시에 표시하는 기능이 필요합니다. 코드는 아래에 첨부되어 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 기능 fn(sgname){
2. $.get('music/' sgname '.lrc',function(data){  
3. var str=parseLyric(데이터)
4. for(var i=0,li;i<str.length;i ){
5. 리=$('<리>' str[i][1] 'li>');
6. $('#gc ul').append(li)
7. }
8. $('#aud')[0].ontimeupdate=함수(){//동영상 오디오의 현재 재생 위치가 변경될 때 트리거됩니다.
9. for (var i = 0, l = str.length; i < l; 🎜>
10. if (this.currentTime /*현재 재생 시간*/ > str[i][0]) {
11. //페이지 표시
12. $('#gc ul').css('top',-i*40 200 'px') //가사를 위로 이동
13. $('#gc ul li').css('color','#fff')
14. $('#gc ul li:nth-child(' (i 1) ')').css('color','red') //현재 재생 중인 가사 강조
15. }
16. }
17. if(this.ended){ //현재 재생 중인 음악이 재생이 완료되었는지 확인
18. var songslen=$('.songs_list li').length
19. for(var i= 0,val;i<송슬렌;i ){
20. val=$('.songs_list li:nth-child(' (i 1) ')').text(); > if(
21. val==sgname){
22. i=(i==(songslen-1))?1:i 2;
23. sgname=$('.songs_list li:nth-child(' i ')').text() //음악 종료 후 전환 음악 연주 $('#gc ul').empty() //가사 지우기
24. $('#aud').attr('src','music/' sgname '.mp3');
25. fn(sgname)
26. 반환
27. }
28. }
29. }
30. }
31. })
32. } fn($('.songs_list li:nth-child(1)').text())
33. 이제 여기에서 음악 가사가 페이지에 정상적으로 동시에 표시될 수 있습니다. 하지만 아직 한 가지 빠진 것이 있는데, 바로 음악 목록입니다. 이 목록에 있는 음악을 클릭하여 음악을 재생할 수 있기를 바랍니다.

HTML 코드

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <div class="songs_cnt" >    
2. <ul class="songs_list" >    
3. <리>어제 한 번 더 리>    
4. <리>참 아름답네요 리>    
5. ul>    
6. <버튼 class="sel_song" >点<br/>< br/>내가버튼>
7. div>    
8. <div id="gc" >    
9. <ul>ul>    
10. div>   

css代码

XML/HTML 코드复复内容到剪贴板

1. #gc{    
2. 너비: 400px;    
3. 높이: 400px;    
4. 배경: 투명;    
5. 여백: 100px auto;    
6. 색상: #fff;    
7. 글꼴 크기: 18px;    
8. 오버플로: 숨김;    
9. 위치: 상대적;    
10. }    
11. #gc ul{    
12. 위치: 절대;    
13. 상단: 200px;    
14. }    
15. #gc ul li{    
16. 텍스트 정렬: 가운데;    
17. 높이: 40px;    
18. 줄 높이: 40px;    
19. }    
20. .songs_cnt{    
21. 플로트: 왼쪽;    
22. 여백 상단: 200px;    
23. 위치: 상대적;    
24. }    
25. .songs_list{    
26. 배경색: rgba(0,0,0,.2);    
27. 테두리 반경: 5px;    
28. 플로트: 왼쪽;    
29. 너비: 250px;    
30. 여백: 15px;    
31. 왼쪽 여백: -280px;    
32. }    
33. .songs_list li{    
34. 높이: 40px;    
35. 줄 높이: 40px;    
36. 글꼴 크기: 16px;    
37. 색상: rgba(255,255,255,.8);    
38. 커서: 포인터;    
39. }    
40. .songs_list li:hover{    
41. 글꼴 크기: 20px;    
42. 색상: rgba(255,23,140,.6);    
43. }    
44. .sel_song{    
45. 위치: 절대;    
46. 상위: 50%;    
47. 너비: 40px;    
48. 높이: 80px;    
49. 여백 상단: -40px;    
50. 글꼴 크기: 16px;    
51. 텍스트 정렬: 가운데;    
52. 배경색: 투명;    
53. 테두리: 1px 단색 #2DCB70;    
54. 글꼴 두께: bold;    
55. 커서: 포인터;    
56. 테두리 반경: 3px;    
57. 글꼴 계열: sans-serif;    
58. 전환:모두 2;    
59. -moz-transition:all 2s;    
60. -webkit-transition:all 2s;    
61. -o-transition:all 2s;    
62. }    
63. .sel_song:hover{    
64. 색상: #fff;    
65. 배경색: #2DCB70;    
66. }    
67. .songs_list li.active{    
68. 색상: #f00;    
69. }   

js代码

XML/HTML 코드复复内容到剪贴板

1. $('.songs_list li:nth-child(1)').addClass('active');    
2. $('.songs_cnt').mouseenter(함수 () {    
3. var e=이벤트||window.event;    
4. var tag= e.target||e.srcElement;    
5. if(tag.nodeName=='BUTTON'){    
6. $('.songs_list').animate({'marginLeft':'0px'},'slow');    
7. }    
8. });    
9. $('.songs_cnt').mouseleave(함수 () {    
10. $('.songs_list').animate({'marginLeft':'-280px'},'slow');    
11. });    
12. $('.songs_list li').each(function () {    
13. $(this).click(function () {    
14. $('#aud').attr('src','music/' $(this).text() '.mp3');    
15. $('#gc ul').empty();    
16. fn($(this).text());    
17. $('.songs_list li').removeClass('active');    
18. $(this).addClass('active');    
19. });    
20. })  

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.