먼저 알송 가사추출기로 lrc 파일을 다운로드 받습니다.

현재 사용하기 가장 편리한 가사 추출기는 https://blog.naver.com/silhwan5125/100112135812 의 첨부파일로 공유되어 있습니다. 그림처럼 가수와 제목을 검색하여 가사파일을 다운로드 받으면 되겠습니다.

lrc 파일은 txt 파일과 똑같습니다. 단 유튜브 동영상과 싱크를 맞추는 노가다는 해 주셔야 합니다.

그래서 제가 올린 lrc 와 실제 사용한 내용은 약간 다릅니다.

이 lrc 파일을 업로드한 후 php 나 ajax 로 호출한 뒤에 본인의 입맛에 맞게 파싱해도 되고

아니면 이 게시글처럼 다이렉트로 사용해도 상관이 없습니다.

이 게시글에서는 style=display:none 를 준 textarea 의 value 로 가사를 띄웠습니다.

1. 한줄 가사

[code]

<script src=https://www.youtube.com/iframe_api></script>
<script>
    function onYouTubeIframeAPIReady() {
        divPlayer = new YT.Player('iframePlayer', { events: {'onReady': onPlayerReady} });
    }
    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>

<style>
#lrcDiv { margin-top:5px; width:720px; padding:10px; text-align:center; border:1px solid #cccccc; box-sizing:border-box; }

</style>
<div id=divPlayer><iframe id=iframePlayer style=width:720px;height:405px src=https://www.youtube.com/embed/ns5f2Ta-8i8?loop=1&playlist=ns5f2Ta-8i8&enablejsapi=1 frameborder=0 allowfullscreen></iframe></div>
<div id=lrcDiv>김돈규 - 나만의 슬픔</div>
<textarea id=lrcText style=display:none>
[00:00.00]가수 : 김돈규
[00:16.00]제목 : 나만의 슬픔
[00:34.00]내소식
[00:37.00]그녀가 들을때 쯤엔
[00:40.70]난 아마
[00:42.62]세상 어디도 없겠지
[00:49.69]친구야
[00:52.08]내게 허락된 시간이
[00:55.81]이젠 다 되어가나봐
[01:02.58]알리진 말아줘
[01:06.38]차라리 그녀가 모르게
[01:11.12]아무런 슬픔도
[01:14.47]남기긴 싫어
[01:17.81]연락이 닿아도
[01:21.58]올수가 없을거야
[01:26.41]이제는
[01:28.39]다른 세상에서 워워
[01:34.97]그녀를 만나서
[01:38.83]내얘길 묻거든
[01:42.61]그저 난 잘있다고
[01:45.89]대답해줘
[01:50.18]이제야 알겠어
[01:54.02]그녀가 내게는
[01:57.82]얼마나 소중했는지
[02:05.82]가슴이 메어와
[02:30.41]나 훗날 재되면
[02:34.09]그녀가 다니는 길목에
[02:38.76]아무도 모르게
[02:41.95]흩어놓아줘
[02:45.29]가끔씩 오가는
[02:49.10]그모습만이라도
[02:53.93]그길에 남아
[02:56.36]볼수있게 워
[03:02.52]그녀를 만나서
[03:06.32]내얘길 묻거든
[03:10.08]그저 난 잘있다고
[03:13.47]대답해줘
[03:17.77]이제야 알겠어
[03:21.58]그녀가 내게는
[03:25.42]얼마나 소중했는지
[03:47.75]약속해줘
[03:51.99]나없는 세상에
[03:55.79]남겨진 그녀를
[03:59.60]나대신 지켜준다고
[04:07.64]그녀를 부탁해</textarea>
<script>
    transLrs =  (lrcText.value.indexOf("[al:") > -1 ? lrcText.value.split("[al:")[1] : "]\n" + lrcText.value).split("\n[");
    lrcTotal = transLrs.length - 1;
    for (lrc = 1; lrc <= lrcTotal; lrc++) {
        lrcTime = Number(transLrs[lrc].split("]")[0].split(":")[0] * 60) + Number(transLrs[lrc].split("]")[0].split(":")[1]);
        this["lrc_" + lrc] = [lrcTime, transLrs[lrc].split("]")[1]];
    }
    function lrcMode() {
        for (lrc = 1; lrc <= lrcTotal; lrc++) {
            if (divPlayer.getCurrentTime() > this["lrc_" + lrc][0]) lrcDiv.innerText = this["lrc_" + lrc][1];
        }             
    }
    setInterval(lrcMode, 10);
</script>

[/code]

2. 두줄 가사

[code]

<script src=https://www.youtube.com/iframe_api></script>
<script>
    function onYouTubeIframeAPIReady() {
        divPlayer = new YT.Player('iframePlayer', { events: {'onReady': onPlayerReady} });
    }
    function onPlayerReady(event) {
        event.target.playVideo();
    }
</script>
<style>
.divLrc { margin-top:5px; width:720px; padding:10px; text-align:center; border:1px solid #cccccc; box-sizing:border-box; }
</style>
<div id=divPlayer><iframe id=iframePlayer style=width:720px;height:405px src=https://www.youtube.com/embed/ns5f2Ta-8i8?loop=1&playlist=ns5f2Ta-8i8&enablejsapi=1 frameborder=0 allowfullscreen></iframe></div>
<div id=lrcDiv_1 class=divLrc style=font-weight:bold;color:#ff0000>가수 : 김돈규</div>
<div id=lrcDiv_2 class=divLrc>제목 : 나만의 슬픔</div>
<textarea id=lrcText style=display:none>
[00:00.00]가수 : 김돈규
[00:16.00]제목 : 나만의 슬픔
[00:34.00]내소식
[00:37.00]그녀가 들을때 쯤엔
[00:40.70]난 아마
[00:42.62]세상 어디도 없겠지
[00:49.69]친구야
[00:52.08]내게 허락된 시간이
[00:55.81]이젠 다 되어가나봐
[01:02.58]알리진 말아줘
[01:06.38]차라리 그녀가 모르게
[01:11.12]아무런 슬픔도
[01:14.47]남기긴 싫어
[01:17.81]연락이 닿아도
[01:21.58]올수가 없을거야
[01:26.41]이제는
[01:28.39]다른 세상에서 워워
[01:34.97]그녀를 만나서
[01:38.83]내얘길 묻거든
[01:42.61]그저 난 잘있다고
[01:45.89]대답해줘
[01:50.18]이제야 알겠어
[01:54.02]그녀가 내게는
[01:57.82]얼마나 소중했는지
[02:05.82]가슴이 메어와
[02:30.41]나 훗날 재되면
[02:34.09]그녀가 다니는 길목에
[02:38.76]아무도 모르게
[02:41.95]흩어놓아줘
[02:45.29]가끔씩 오가는
[02:49.10]그모습만이라도
[02:53.93]그길에 남아
[02:56.36]볼수있게 워
[03:02.52]그녀를 만나서
[03:06.32]내얘길 묻거든
[03:10.08]그저 난 잘있다고
[03:13.47]대답해줘
[03:17.77]이제야 알겠어
[03:21.58]그녀가 내게는
[03:25.42]얼마나 소중했는지
[03:47.75]약속해줘
[03:51.99]나없는 세상에
[03:55.79]남겨진 그녀를
[03:59.60]나대신 지켜준다고
[04:07.64]그녀를 부탁해</textarea>
<script>
    transLrs =  (lrcText.value.indexOf("[al:") > -1 ? lrcText.value.split("[al:")[1] : "]\n" + lrcText.value).split("\n[");
    lrcTotal = transLrs.length - 1;
    for (lrc = 1; lrc <= lrcTotal; lrc++) {
        lrcTime = Number(transLrs[lrc].split("]")[0].split(":")[0] * 60) + Number(transLrs[lrc].split("]")[0].split(":")[1]);
        this["lrc_" + lrc] = [lrcTime, transLrs[lrc].split("]")[1]];
    }
    function lrcMode() {
        for (lrc = 1; lrc <= lrcTotal; lrc++) {
            if (divPlayer.getCurrentTime() > this["lrc_" + lrc][0]) {
                lrcDiv_1.innerText = this["lrc_" + lrc][1];
                lrcDiv_2.innerText = lrc == lrcTotal ? "감사합니다" : this["lrc_" + (lrc + 1)][1];
            }
        }             
    }
    setInterval(lrcMode, 10);
</script>

[/code]

결과물 - http://www.mediaplayer.kr/main/tip/18

mp3 사운드도 원리는 동일합니다.