HTML5는 오디오 태그를 사용하여 가사 동기화 효과를 얻습니다.

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

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

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

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

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

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

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

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

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

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

HTML 코드