가사 연동 오디오 플레이어 정보
가사 연동 오디오 플레이어본문
1. 먼저 https://sir.kr/g5_tip/16028 에서 lrc 파일을 이용하여 원하는 가사를 추출해 줍니다.
2. 가사 한줄 자체가 버튼이며 사운드의 시간이나 오디오의 트랙바에 따라서 자동반응합니다.
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
9
댓글 10개
좋은 팁 감사 드립니다.
@들레아빠 감사합니다
좋은팁 감사합니다.
@푸른산타 감사합니다
좋네요..
@Ryanhong1233 감사합니다
넘 좋으네요
@끝없는사랑 감사합니다
참 신기하네요..
@메너 감사합니다.