[ 자바스크립트 ] 클립챔프용 타임코드

[비타주리]

1. 클립챔프에서 쉬운 가사영상을 만들기 위해 만든 자바스크립트 소스입니다.
원래는 에디터로 만들까 하다가 클립챔프 가사영상이 5개 이상 올라오면 그 때 만들기로 하였습니다.

가장 먼저 가사편집 에디터(여길클릭)을 이용하여 오디오 싱크를 확실히 맞춘 lrc 를 다운로드 받습니다.
가사편집 에디터 소개글 7번항목에 해당합니다.
가사를 만들 때는 lrc 한줄이 아니라 처음부터 두즐 세줄을 합쳐서 최소 20라인 이내로 만들어 주는 것이 정신건강에 이롭습니다.
그 부분은 역시 가사편집 에디터에서 링크가 된 https://cafe.daum.net/Artworld/V8k9/8 의 3번항목을 참조해 주세요.

2. 그렇게 만들어진 lrc 파일이 첨부파일 clipchamp_lrc.lrc 파일입니다.
이걸 다운로드 받으세요. 다운로드가 안 되는 분들은 여길클릭 하여 다운로드합니다.
메모장으로 열고 전체를 마우스드래그로 긁어서 복사한 후 태그연습장(여길클릭)을 열고 아래 해당코드 글자 부분에 대입하여 소스를 만든 후 죄측창에 붙여넣고 결과보기를 클릭합니다.

--------------------

<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
@font-face { font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); }
* { font-family:'NEXON Lv1 Gothic OTF' !important; }
#clipChampDiv { font-size:18px; border-top:1px solid #cccccc; }
#clipChampDiv div { padding:15px; border:1px solid #cccccc; border-top:0px;  }
#clipChampDiv div span { color:#c00000; font-size:20px; font-weight:bold;  font-family:Lato !important; padding:0px 5px;  }
</style>
<div id="clipChampDiv"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    saveString = clipChamp;
    clipChamp = clipChamp.trim().split("\n");
    for (i in clipChamp) clipChamp[i] = "[" + ("0" + i).slice(-2) + "]  " + clipChamp[i].slice(0, 10).replace("[", "<span>").replace("]", "</span> ");
    clipChamp.push("[" + ("0" + clipChamp.length).slice(-2) + "] <span>99:99.99</span> ");
    clipChamp = clipChamp.splice(1);
    for (j in clipChamp) clipChamp[j] =  "<div>" + clipChamp[j] + saveString.trim().split("\n")[j].split("]")[1] + "</div>"; 
    clipChamp = clipChamp.join("");
    clipChampDiv.innerHTML = clipChamp;
});
clipChamp = `
해당코드
`;
</script>

3. 실제코드는 아래처럼 됩니다.

--------------------

<link href="https://fonts.googleapis.com/css2?family=Lato" rel="stylesheet">
<style>
@font-face { font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff'); }
* { font-family:'NEXON Lv1 Gothic OTF' !important; }
#clipChampDiv { font-size:18px; border-top:1px solid #cccccc; }
#clipChampDiv div { padding:15px; border:1px solid #cccccc; border-top:0px;  }
#clipChampDiv div span { color:#c00000; font-size:20px; font-weight:bold;  font-family:Lato !important; padding:0px 5px;  }
</style>
<div id="clipChampDiv"></div>
<script>
document.addEventListener("DOMContentLoaded", () => {
    saveString = clipChamp;
    clipChamp = clipChamp.trim().split("\n");
    for (i in clipChamp) clipChamp[i] = "[" + ("0" + i).slice(-2) + "]  " + clipChamp[i].slice(0, 10).replace("[", "<span>").replace("]", "</span> ");
    clipChamp.push("[" + ("0" + clipChamp.length).slice(-2) + "] <span>99:99.99</span> ");
    clipChamp = clipChamp.splice(1);
    for (j in clipChamp) clipChamp[j] =  "<div>" + clipChamp[j] + saveString.trim().split("\n")[j].split("]")[1] + "</div>"; 
    clipChamp = clipChamp.join("");
    clipChampDiv.innerHTML = clipChamp;
});
clipChamp = `
[00:00.00]조하문 : 이 밤을 다시 한번
[00:16.63]아주 우연히 만나 슬픔만 안겨준 사람 내 맘속에 작은 촛불이 되어
[00:32.61]보고 싶어질 때면 두눈을 감아버려요 소리 질러 불러보고 싶지만
[00:49.48]어디에선가 당신 모습이 다가오는 것 같아 이젠 견딜 수 없어요
[01:07.94]이 밤을 이 밤을 다시 한번 당신과 보낼 수 있다면
[01:23.25]이 모든 이 모든 내 사랑을 당신께 드리고 싶어요
[01:54.04]조그만 낙엽들이 땅 위에 떨어지듯이 내 맘은 갈 곳이 없어요
[02:11.06]어디에선가 당신 모습이 다가오는 것 같아 이젠 견딜 수 없어요
[02:29.75]이 밤을 이 밤을 다시 한번 당신과 보낼 수 있다면
[02:44.62]이 모든 이 모든 내 사랑을 당신께 드리고 싶어요
[03:00.24]이 밤을 이 밤을 다시 한번 당신과 보낼 수 있다면
[03:15.35]이 모든 이 모든 내 사랑을 당신께 드리고 싶어요
`;
</script>

4. 아래처럼 클립챔프에 깔맞춤된 타임코드가 "왁꾸"안으로 타임부분은 빨갛게 강조되어 추출됩니다.
이 코드로 클립챔프에서 가사영상을 만드는 방법은 클립챔프 강의에서 설명하도록 하겠습니다.

clipchamp_lrc.lrc

983B

[비타주리]

진짜 새로운 걸 하나 하려하면 뭐 그리 준비해야 하는 것이 이리 많은지 모르겠네요...

[꼬꼬마]

클챔가사 영상 코드를 만드셨군요.
클립챔프를 안써봐서 잘모르지만 강의가 올라오면 따라해 보도록하겠습니다.
수고 많이 하셨습니다.

[오라클 안]

참으로 경탄합니다 끊임없이 개발하시고 정진하시는 주리님 모습을 보면서 감동합니다.
클챔 더욱 심화해서 공부하겠습니다. 한 분의 영재가 수고하셔서 많은 대중이 편히 누릴 수 있슴을 깨닫습니다^^

[시화연]

새로운 세상이 열리는 아트월드 입니다~ ^^*

[이니스]

진짜 공부할게 너무 넘칩니다.

감사합니다.

[소피]

클립챔프 하시는 회원님들을 위한 ~ 귀한 강좌입니다요 ~ 수고하셨습니다 감사합니다 ~ ^^

[포인세티아]

클챔 수고하신 강좌 추천 합니다.~~

[변하린]

정말 정말 고생이 많으신 주리님...
열정 아니면 정말 못할 일이지요.
항상 우러러 보게 되는 분이세요~

[박피디]

클립챔프용 타임코드도 만드셨군요
역시 주리님이세요 ~ 왕 추천 합니다