가사 연동 오디오 플레이어 > 그누보드5 팁자료실

그누보드5 팁자료실

가사 연동 오디오 플레이어 정보

가사 연동 오디오 플레이어

본문

 

1. 먼저 https://sir.kr/g5_tip/16028 에서 lrc 파일을 이용하여 원하는 가사를 추출해 줍니다.

 

2. 가사 한줄 자체가 버튼이며 사운드의 시간이나 오디오의 트랙바에 따라서 자동반응합니다.

 

3553550789_1673532771.4323.jpg

 

3. 아래의 코드를 작성합니다. php 가 아닌 자바스크립트입니다.

 


<audio id="audioPlayer" style="display:block" src="//blog.kakaocdn.net/dn/XElPl/btrVWzgcXvV/kAUOt65We4ATsmxwjNkMe1/tfile.mp3" autoplay loop controls></audio>
<div id="lrcDiv"></div>
<script>
lrcText = `
[ti:아득히 먼곳]
[al:이승재 - 아득히 먼곳]
[00:00.87]아득히 먼곳 : 이승재
[00:23.03]찬바람 비껴 불어 이르는 곳에
[00:28.93]마음을 두고 온 것도 아니라오
[00:36.04]먹구름 흐트러져 휘도는 곳에
[00:43.50]미련을 두고 온 것도 아니라오
[00:50.64]아~ 어쩌다 생각이 나면
[00:56.66]그리운 사람 있어 밤을 지새고
[01:04.05]가만히 생각하면 아득히 먼 곳이라
[01:10.81]허전한 이 내 맘에 눈물 적시네.
[01:19.38]~~간~주~~
[01:47.48]황금빛 저녁 노을 내리는 곳에
[01:53.10]사랑이 머무는 것도 아니라오.
[02:00.49]호수가 푸른 숲 속 아늑한 곳에
[02:07.48]내 님이 머무는 것도 아니라오.
[02:15.65]아~ 어쩌다 생각이 나면
[02:22.86]그리운 사람 있어 밤을 지새고
[02:29.03]가만히 생각하면 아득히 먼 곳이라
[02:36.64]허전한 이 내 맘에 눈물 적시네
[02:43.78]아~ 어쩌다 생각이 나면
[02:49.41]그리운 사람 있어 밤을 지새고
[02:56.73]가만히 생각하면 아득히 먼곳이라
[03:03.82]허전한 이내맘에 눈물 적시네~~
`;
textLrc = (lrcText.trim().indexOf("[al:") > -1 ? lrcText.trim().split("[al:")[1] : "]\n" + lrcText.trim()).split("\n[");
lrcTotal = textLrc.length - 1;
for (lrc = 1; lrc <= lrcTotal; lrc++) {
    lrcTime = Number(textLrc[lrc].split("]")[0].split(":")[0] * 60) + Number(textLrc[lrc].split("]")[0].split(":")[1]);
    this["lrc_" + lrc] = [Math.round(lrcTime * 100) / 100, textLrc[lrc].split("]")[1]];
}
for (lrc = 1; lrc <= lrcTotal; lrc++) lrcDiv.innerHTML = lrcDiv.innerHTML + "<br><span id='lrc" + lrc + "' style='cursor:pointer'>" +this["lrc_" + lrc][1] + "</span>";
for (lrc = 1; lrc <= lrcTotal; lrc++) {
    this["lrc" + lrc].lrc = lrc;
    this["lrc" + lrc].addEventListener("click", function() {
        audioPlayer.currentTime = window["lrc_" + this.lrc][0];
        audioPlayer.play();
    } );
}
setInterval(() => {
    for (lrc = 1; lrc <= lrcTotal; lrc++) this["lrc" + lrc].style.color = audioPlayer.currentTime > this["lrc_" + lrc][0] ? "#ff0000" : "#000000";
}, 40);
</script>

 

4. 역따옴표 변수 안에 lrc 파일에서 추출한 문자열을 넣어주기만 하면 됩니다.

 

lrcText = `
lrc파일 문자
`;

 

5. 단 lrc 파일에 문자열은 좌측과 딱 붙어야 합니다. 한칸이라도 띄워지면 그것 역시 문자열로 인식하기 때문입니다.

 

6. 결과는 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.

꾸미기와 스타일링은 본인들이 알아서...

추천
9

댓글 10개

전체 2,407 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT