가사 연동 오디오 플레이어
1. 먼저 https://sir.kr/g5_tip/16028 에서 lrc 파일을 이용하여 원하는 가사를 추출해 줍니다.
2. 가사 한줄 자체가 버튼이며 사운드의 시간이나 오디오의 트랙바에 따라서 자동반응합니다.

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개
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2694 | 2개월 전 | 188 | ||
| 2693 | 2개월 전 | 148 | ||
| 2692 | 2개월 전 | 158 | ||
| 2691 | 2개월 전 | 174 | ||
| 2690 | 2개월 전 | 326 | ||
| 2689 | 2개월 전 | 233 | ||
| 2688 |
|
2개월 전 | 441 | |
| 2687 | 2개월 전 | 292 | ||
| 2686 |
선택과집중
|
2개월 전 | 329 | |
| 2685 | 2개월 전 | 291 | ||
| 2684 | 2개월 전 | 346 | ||
| 2683 | 2개월 전 | 481 | ||
| 2682 | 2개월 전 | 276 | ||
| 2681 | 2개월 전 | 302 | ||
| 2680 |
선택과집중
|
2개월 전 | 278 | |
| 2679 | 2개월 전 | 330 | ||
| 2678 |
|
3개월 전 | 429 | |
| 2677 |
|
3개월 전 | 502 | |
| 2676 | 3개월 전 | 326 | ||
| 2675 | 3개월 전 | 304 | ||
| 2674 |
선택과집중
|
3개월 전 | 480 | |
| 2673 |
|
3개월 전 | 322 | |
| 2672 | 3개월 전 | 335 | ||
| 2671 | 3개월 전 | 284 | ||
| 2670 | 3개월 전 | 260 | ||
| 2669 | 3개월 전 | 374 | ||
| 2668 | 3개월 전 | 289 | ||
| 2667 |
선택과집중
|
3개월 전 | 484 | |
| 2666 |
선택과집중
|
3개월 전 | 470 | |
| 2665 |
선택과집중
|
3개월 전 | 404 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기