전체공개 : [ 가사에디터 세팅 ]

[비타주리]

[ 가사에디터 세팅 ]

드디어 "대망"의 가사에디터를 만들었습니다.

이전 스위시월드 시절의 에디터는 swf 로 만든 것이라 보편성이 현저하게 떨어져서 웹페이지로 새로 만들었습니다.
그리고 이전의 에디터는 숫자를 자연수로 반올림했는데
이번 에디터는 소수점 두자리까지 더 디테일하게 코드를 구성하였습니다.

카페 좌측 메뉴창에도 있고 바로가기는 여길클릭 해 보세요.

아래 링크는 예제 영상입니다.

1. 비타주리 두줄 사운드 가사 영상 - https://blog.jinbo.net/attach/7237/8212013273.mp4
2. 소피님 스크롤 사운드 가사 영상 - https://blog.kakaocdn.net/dn/etFXfg/btrO4f8ZnSy/wGeX89KnYSD4v0keMSKJEk/tfile.mp4
3. 빨간구두님 두줄 동영상 가사 영상 - https://va.media.tumblr.com/tumblr_rwjzcjUYW21a3r1ot.mp4

가사에디터는 알송 가사추출기에서 뺀 lrc 파일의 일반 문자열을 스크립트 문자열로 파싱하는 에디터입니다.
이번에는 확장성을 더 넓혀서 스위시 스크립트는 물론 자바 스크립트에서도 활용이 가능하게끔 코드를 꾸몄습니다.

예를 들어서 lrc 의 문자열이 아래와 같다고 한다면...

[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]허전한 이내맘에 눈물 적시네~~

가사에디터의 좌측창에 이걸 붙여넣고 코드변환 버튼을 누르면 우측창에 스크립트로 사용 가능한 문자열로 변환되어 나타나게 됩니다. 이걸 복사하여 스위시 스크립트나 자바 스크립트로 응용하여 컨텐츠를 만들 수 있습니다. 아래 그림 참고하세요.

스위시 스크립트로 활용하는 방법은 점진적으로 배포를 하겠습니다.
일단 맛빼기로 "자바 스크립트" 예제작 코드를 테스트해 보세요.
물론 일반 태그로는 불가능합니다.
자바 스크립트는 클릭질이 가능해서 가사 한줄 한줄이 모두 버튼입니다.
다음카페에도 자바 스크립트가 가능하다면 정말 좋겠다는 생각을 늘 하고 있습니다.
예제작 코드라 따로 스타일링은 하지 않았으니 디자인은 보지 마시길...

아래 코드를 태그연습장 여길클릭 해서 확인해 보세요.

<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>
lrc_1 = [0, "아득히 먼곳 : 이승재"];
lrc_2 = [23.03, "찬바람 비껴 불어 이르는 곳에"];
lrc_3 = [28.93, "마음을 두고 온 것도 아니라오"];
lrc_4 = [36.04, "먹구름 흐트러져 휘도는 곳에"];
lrc_5 = [43.5, "미련을 두고 온 것도 아니라오"];
lrc_6 = [50.64, "아~ 어쩌다 생각이 나면"];
lrc_7 = [56.66, "그리운 사람 있어 밤을 지새고"];
lrc_8 = [64.05, "가만히 생각하면 아득히 먼 곳이라"];
lrc_9 = [70.81, "허전한 이 내 맘에 눈물 적시네."];
lrc_10 = [79.38, "~~간~주~~"];
lrc_11 = [107.48, "황금빛 저녁 노을 내리는 곳에"];
lrc_12 = [113.1, "사랑이 머무는 것도 아니라오."];
lrc_13 = [120.49, "호수가 푸른 숲 속 아늑한 곳에"];
lrc_14 = [127.48, "내 님이 머무는 것도 아니라오."];
lrc_15 = [135.65, "아~ 어쩌다 생각이 나면"];
lrc_16 = [142.86, "그리운 사람 있어 밤을 지새고"];
lrc_17 = [149.03, "가만히 생각하면 아득히 먼 곳이라"];
lrc_18 = [156.64, "허전한 이 내 맘에 눈물 적시네"];
lrc_19 = [163.78, "아~ 어쩌다 생각이 나면"];
lrc_20 = [169.41, "그리운 사람 있어 밤을 지새고"];
lrc_21 = [176.73, "가만히 생각하면 아득히 먼곳이라"];
lrc_22 = [183.82, "허전한 이내맘에 눈물 적시네~~"];
for (lrcTotal = 0; this["lrc_" + (lrcTotal + 1)]; lrcTotal++);
for (i = 1; i <= lrcTotal; i++) lrcDiv.innerHTML = lrcDiv.innerHTML + "<br><span id='lrc" + i + "' style='cursor:pointer'>" +this["lrc_" + i][1] + "</span>";
for (i = 1; i <= lrcTotal; i++) {
    this["lrc" + i].i = i;
    this["lrc" + i].addEventListener("click", function() {
        audioPlayer.currentTime = window["lrc_" + this.i][0];
        audioPlayer.play();
    } );
}
setInterval(() => {
    for (i = 1; i <= lrcTotal; i++) this["lrc" + i].style.color = audioPlayer.currentTime > this["lrc_" + i][0] ? "#ff0000" : "#000000";
}, 40);
</script>

사실 자바 스크립트의 경우는 굳이 이 에디터가 필요없습니다. 역따옴표 변수 안에 원래의 문자열을 넣고 다이렉트로 파싱하면 되니까요.

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

[빨간구두]

드디어 만드셨네요. 제가 너무 닥달해서 죄송요. 이래서 울 카페는 또 하나의 날개를 달았습니다. 추천 꽝.
아 제 가사 동영상 게시글도 전체공개로 돌려 놓을게요.

[비타주리]

어차피 한번은 해야 할 일이었습니다.

[빨간구두]

확실히 자바스크립트는. 스위시 스크립트와 형태가 거의 동일해서 액션 스크립트 전공하신 분이라면 자바스크립트도 유사패턴으로 코딩이 가능해서 참 괜찮은 것 같습니다.

[비타주리]

코딩언어는 대부분 패턴이 유사합니다

[운이]

대망의 가사에디터를 드디어 만드셨나 봅니다
오래전에 해본거 같은데 다 잊어버려서
지금은 추천만 누루고 가사창에디터 북마크해봅니다
수고많으셨습니다^^

[비타주리]

조만간 사용방법 및 swi 올릴게요.

[꼬꼬마]

가사에디터 무척 심혈을 기우려서 만드셨습니다.
유익하게 쓰일듯 합니다.
수고하셨고 고맙습니다.

[비타주리]

알고나면 무지 쉬워요.ㅋ

[둥절]

예제 연습장에 해보니 왕 신기 ㅎㅎ;;
유용한 가사에디터 감사히 담아 둡니다.
주리님 수고하셨습니다 ^^

[비타주리]

비타주리는 자바스크립트 코딩이 대한민국의 상위 1% 에 들어간다고 자부하고 있습니다.ㅋ

[미소]

대단하신 능력자세요
많이 배워갈게요
감사 인사 드립니다

[비타주리]

예 감사합니다.

[오라클 안]

와~ 정말 놀라울 뿐입니다 감동~*

[비타주리]

이거 스위시소스를 좀 올랴 하는데 시간이 영...

[오라클 안]

정말 대단하세요 비타주리 메니저님~**

[세이]

그져 황홀합니다.
참 신기하구요!~~~
추천 꾹입니다^^