2026, 새로운 도약을 시작합니다.

가사 연동 오디오 플레이어

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

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

3553550789_1673532771.4323.jpg

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

[code]

<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>

[/code]

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

lrcText = `
lrc파일 문자
`;

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

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

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

|

댓글 10개

좋은 팁 감사 드립니다.
@들레아빠 감사합니다
좋은팁 감사합니다.
@푸른산타 감사합니다
@Ryanhong1233 감사합니다
넘 좋으네요
@끝없는사랑 감사합니다
@메너 감사합니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

그누보드5 팁자료실

번호 제목 글쓴이 날짜 조회
공지 3년 전 조회 4,599
2741 4일 전 조회 128
2740 5일 전 조회 113
2739 1주 전 조회 217
2738 1주 전 조회 221
2737 1주 전 조회 185
2736 2주 전 조회 284
2735 3주 전 조회 290
2734 3주 전 조회 264
2733 1개월 전 조회 267
2732 1개월 전 조회 303
2731 1개월 전 조회 270
2730 1개월 전 조회 229
2729 1개월 전 조회 361
2728 1개월 전 조회 246
2727 1개월 전 조회 422
2726 1개월 전 조회 260
2725 1개월 전 조회 332
2724 1개월 전 조회 363
2723 1개월 전 조회 267
2722 1개월 전 조회 301
2721 1개월 전 조회 214
2720 2개월 전 조회 304
2719 2개월 전 조회 314
2718 2개월 전 조회 202
2717 2개월 전 조회 337
2716 2개월 전 조회 204
2715 2개월 전 조회 314
2714 2개월 전 조회 273
2713 2개월 전 조회 378
2712 2개월 전 조회 290
🐛 버그신고