[ 가사편집 에디터 ]

[비타주리]

가사편집 에디터 바로가기 - https://wittazzurri.com/artworld/lrc_editor.php

1. 가사에디터로 만든 영상예제는

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 파일을 메모장으로 열고 문자인코딩이 다른 것으로 되어 있으면 반드시 UTF-8 로 바꿔줍니다.

2. 가사편집 에디터를 열어주십시오
아래처럼 lrc 찾기버튼을 클릭하여 "내컴"에서 UTF-8 로 인코딩된 lrc 파일을 부르면 우측에 다이렉트로 코드가 완성됩니다. 

3. 역시 로컬(내컴)에 있는 mp3 파일을 불러옵니다.

4. 바로 자바스크립트 통라인 가사 플레이어가 만들어졌을 것입니다.
이것만으로 완성이 되면 좋겠으나 실은 싱크가 맞지 않는 경우도 꽤 있습니다.
싱크가 맞는지 맞지 않는지는 플레이어 각 가사부분이 빨간색으로 변하는 걸 보면 알 수 있습니다.
그리고 가사 하나하나가 버튼이으로 가사버튼을 클릭해 보면 확인이 가능합니다.

다음은 싱크가 맞지 않는 가사와 사운드를 맞추는 작업입니다. 먼저 전체시간을 맞추어 보겠습니다.
아래 좌하단에 전체의 시간을 더하거나 빼는 연산을 해 주세요.
기본값은 1초로 했는데 본인이 0.5초 등으로 원하는 초단위 시간으로 바꿔서 재주껏 맞춰 주십시오.
아마 이 작업만 제대로 하면 대개의 경우 오디오의 싱크는 원하는대로 나올 수가 있습니다.

음원을 모두 들으면서 맞추기 보다는 좌측 플레이어의 트랙바를 이동시켜서 그 부근의 시간대만 살펴보세요.
플레이어의 온오프버튼과 노란색 바탕의 PLAY STOP 토글버튼을 이용하여 시간이 맞았다 싶으면 음악을 정지시키고 타임코드를 입력합니다.
또한 좌측의 통라인 가사는 가사 하나하나가 개별 버튼이니 여러가지를 활용하면 타임코드를 쉽게 맞출 수 있습니다.
그리고 좌측 상단 플레이어의 타이머는 아예 없다고 간주하는 것이 "정신건강"에 이롭습니다.^^

5. 타임코드를 수정할 때 좌측 통라인 가사는 보이지 않습니다. 타임코드 수정 이후 "코드실행" 버튼을 눌러서 진행하십시오.

6. 가사의 개별 타임코드를 바꾸는 방법입니다.
사실 앞 부분에서 전체 타임코드를 맞추면 대부분 싱크가 맞지만 하나씩 각개로 맞추어야 할 때도 있을 것입니다.
아래그림 상단에 마킹된 78.83 이란 부분은 78.83 초라는 시간을 의미합니다.
이걸 수정할 타임코드인 79.38 부분을 지우고 수작업으로 직접 입력합니다.

7. 통라인 가사와 오디오 싱크를 다 맞추었으면 코드복사 버튼을 눌러서 스크립트를 카피합니다.
아름다운 AI 여성의 상냥한 효과음도 첨가하였습니다. 원하는 곳으로 붙여넣기 하시면 되겠습니다.
동시에 수정한 타임코드가 기입된 새로운 lrc 파일을 다운로드할 수 있는 빨간색 버튼이 생겨납니다.
수정본 lrc 파일은 처음부터 UTF-8 로 인코딩해 놓았습니다. 가사 백업용으로 활용하시기 바랍니다.
파일이름은 artworld.lrc 로 저장이 됩니다.

8. 가장하단에는 초시간 부분만 따로 배열을 만들어서 복사할 수 있게 해 놓았습니다.
이 사항은 특별한 언굽이 없는 이상 그냥 무시하고 넘어가십시오.
이건 큰 필요가 없을 수도 있겠으나 비타주리는 한번씩은 필요한 배열이라서 기왕 만든 김에 약간 시간투자를 더 하였습니다. 

9. 무언가가 엉켰으면 "처음으로" 버튼을 눌러서 다시 세팅을 하세요.
좌하단에는 기본창과 풀모드창의 토글버튼이 있으니 때에 따라 활용하십시오.
원래 웹에 업로드한 파일을 부르는 코딩보다 로컬(내컴)에 있는 파일을 부르는 코딩은
웬만한 웹 프로그래머도 사용하기 어려운 세심함을 요구합니다.
하도 가사 타임코드와 싱크 맞추기가 어렵다고 하소연하는 분들이 계셔서 작정하고 컴과 웹을 연결하는 방식의 코딩을 해 보았습니다.
그럼에도 불구하고 이게 어렵다는 분들에게는 제가 이제 드릴 말씀이 없을 것 같습니다. 무지 쉬우니 금방 따라 하실 것입니다.

[비타주리]

제가 여태까지 만든 것 중에서 가장 상위 난이도에 해당하는 코딩 결과물입니다. 유용하게 사용하세요.

[포인세티아]

수고하신 가사편집 에디터 잘사용하겠습니다 수고하셨습니다.~~추천~~

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[꼬꼬마]

와!!!
사용하기 쉽게 가사편집 에디터를 만들어주셨네요.
잘 사용하겠습니다.
수고 많이 하셨습니다.
추천합니다

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[라인]

와~ 전 먼 말인지 전혀 모르겠음요...
저도 이제 스위시 설치 했으니..차차 알게 되겠네요

여긴 꼭 배워야 할 것 같으니
즐겨 찾기를 해 둘랍니다 ~ 감사합니다 ^^

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[변하린]

회원님들을 위해 무지 고생하시는 울 주리님...
감사하고 또 감사합니다.

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[시화연]

편하게 사용하도록 나눔 주신 주리님 마음 감사합니다 ^^

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[조우]

강좌 감사 합니다 지기 님..

[비타주리]

6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.

[소피]

네에 ~ 세심한 배려로 좀더 수월한 작업이 되겠어요 ~ 수고하셨습니다 ~ 감사드립니다 ~ ^^

[비타주리]

당분간 에디터나 몇개 더 만들려구요. 회원등급 조절후에 영상소스 나눔할 생각입니다.^^

[오라클 안]

주리님 수고 너무 많으십니다
저는 몇 번을 읽고 또 생각하고 겨우 겨우 터득해가고 있습니다 너무 감사합니다~^^

[오라클 안]

재차 정독하고 실습을 통해 익히게 되었습니다. 주리님의 노고를 생각하면 얼른 학습작을 제출해야겠습니다. 가양님의 학습작을 보고 분발하고 있습니다~*