<div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td style="width: 100%; text-align: center;"><br><b>가사편집 에디터 바로가기 - <a href="https://wittazzurri.com/artworld/lrc_editor.php" target="_blank" class="ke-link">https://wittazzurri.com/artworld/lrc_editor.php</a></b><br><br></td></tr></tbody></table></div><div class="figure-html" data-ke-type="html" data-source="<link rel="stylesheet" href="https://t1.daumcdn.net/cafeattach/1ZdFf/82af763a7f21c883e5f65d4f512228fca34453f8">
<style>
.table-wrap table { max-width:1024px !important; margin:0 auto !important; border:4px double #cccccc !important; }
.figure-img img { width:960px !important; max-width:100% !important; }
.mp4 { display:block; width:100%; max-width:1024px; border:none; border-radius:0px; box-sizing:border-box; margin:0 auto; }
.mp4::-webkit-media-controls-fullscreen-button { display:none; }
.mp4::-webkit-media-controls-panel { background-image:none; }
</style>
<video class="mp4" src="https://blog.kakaocdn.net/dn/ZCkf3/btsDsXDwl4O/I7HCuG0dmL47mbd48Nw0MK/tfile.mp4" autoplay loop controls controlslist="nodownload"></video>"><div data-ke-class="article"><link rel="stylesheet" href="https://t1.daumcdn.net/cafeattach/1ZdFf/82af763a7f21c883e5f65d4f512228fca34453f8">
<style>
.table-wrap table { max-width:1024px !important; margin:0 auto !important; border:4px double #cccccc !important; }
.figure-img img { width:960px !important; max-width:100% !important; }
.mp4 { display:block; width:100%; max-width:1024px; border:none; border-radius:0px; box-sizing:border-box; margin:0 auto; }
.mp4::-webkit-media-controls-fullscreen-button { display:none; }
.mp4::-webkit-media-controls-panel { background-image:none; }
</style>
<video class="mp4" src="https://blog.kakaocdn.net/dn/ZCkf3/btsDsXDwl4O/I7HCuG0dmL47mbd48Nw0MK/tfile.mp4" autoplay loop controls controlslist="nodownload"></video></div></div><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1" data-ke-style="style7"><tbody><tr><td style="width: 100%; text-align: center;"><br>1. 가사에디터로 만든 영상예제는 <br><br>1) 비타주리 두줄 사운드 - <a href="https://blog.jinbo.net/attach/7237/8212013273.mp4" target="_blank" class="ke-link">https://blog.jinbo.net/attach/7237/8212013273.mp4</a><br>2) 소피님 스크롤 사운드 - <a href="https://blog.kakaocdn.net/dn/etFXfg/btrO4f8ZnSy/wGeX89KnYSD4v0keMSKJEk/tfile.mp4" target="_blank" class="ke-link">https://blog.kakaocdn.net/dn/etFXfg/btrO4f8ZnSy/wGeX89KnYSD4v0keMSKJEk/tfile.mp4</a><br>3) 빨간구두님 두줄 동영상 - <a href="https://va.media.tumblr.com/tumblr_rwjzcjUYW21a3r1ot.mp4" target="_blank" class="ke-link">https://va.media.tumblr.com/tumblr_rwjzcjUYW21a3r1ot.mp4</a><br><br>등등 정말로 많은 가사관련 컨텐츠를 손쉽게 만들 수 있습니다.<br><br>이 가사편집 에디터를 사용하려면 사전지식이 필요합니다.<br>일단 가사 추출기(<a href="https://cafe.daum.net/Artworld/V8k9/8" target="_blank" class="ke-link">여길클릭</a>)로 lrc 파일을 생성하고 기본적인 것을 수정합니다. 시간은 안 맞춰도 됩니다.<br>첫째라인 시간누락시 가수와 노래제목의 기입방법 및 가사합치기만 신경쓰세요.<br><br>첫번째로 lrc 파일을 메모장으로 열고 문자인코딩이 다른 것으로 되어 있으면 반드시 UTF-8 로 바꿔줍니다.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/9eaf5dac5e4af3ca71c74af2b6df2d7c7f464224" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/9eaf5dac5e4af3ca71c74af2b6df2d7c7f464224" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>2. 가사편집 에디터를 열어주십시오<br>아래처럼 lrc 찾기버튼을 클릭하여 "내컴"에서 UTF-8 로 인코딩된 lrc 파일을 부르면 우측에 다이렉트로 코드가 완성됩니다. <br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/4856b50640dc62ad19ee6512c0f6b2c5e7215600" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/4856b50640dc62ad19ee6512c0f6b2c5e7215600" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>3. 역시 로컬(내컴)에 있는 mp3 파일을 불러옵니다.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/886920b32f176debe59bdedc0e7dfa7fc9cb6430" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/886920b32f176debe59bdedc0e7dfa7fc9cb6430" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>4. 바로 자바스크립트 통라인 가사 플레이어가 만들어졌을 것입니다.<br>이것만으로 완성이 되면 좋겠으나 실은 싱크가 맞지 않는 경우도 꽤 있습니다.<br>싱크가 맞는지 맞지 않는지는 플레이어 각 가사부분이 빨간색으로 변하는 걸 보면 알 수 있습니다.<br>그리고 가사 하나하나가 버튼이으로 가사버튼을 클릭해 보면 확인이 가능합니다.<br><br>다음은 싱크가 맞지 않는 가사와 사운드를 맞추는 작업입니다. 먼저 전체시간을 맞추어 보겠습니다.<br>아래 좌하단에 전체의 시간을 더하거나 빼는 연산을 해 주세요.<br>기본값은 1초로 했는데 본인이 0.5초 등으로 원하는 초단위 시간으로 바꿔서 재주껏 맞춰 주십시오.<br>아마 이 작업만 제대로 하면 대개의 경우 오디오의 싱크는 원하는대로 나올 수가 있습니다.<br><br>음원을 모두 들으면서 맞추기 보다는 좌측 플레이어의 트랙바를 이동시켜서 그 부근의 시간대만 살펴보세요. <br>플레이어의 온오프버튼과 노란색 바탕의 PLAY STOP 토글버튼을 이용하여 시간이 맞았다 싶으면 음악을 정지시키고 타임코드를 입력합니다. <br>또한 좌측의 통라인 가사는 가사 하나하나가 개별 버튼이니 여러가지를 활용하면 타임코드를 쉽게 맞출 수 있습니다. <br>그리고 좌측 상단 플레이어의 타이머는 아예 없다고 간주하는 것이 "정신건강"에 이롭습니다.^^<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/7759e7fbf7375365d2c405f09a5b2d183d9cf3bc" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/7759e7fbf7375365d2c405f09a5b2d183d9cf3bc" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>5. 타임코드를 수정할 때 좌측 통라인 가사는 보이지 않습니다. 타임코드 수정 이후 "코드실행" 버튼을 눌러서 진행하십시오.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/e08bb5867de9862e89ad1ecf7a8a60ae4ca9dfd6" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/e08bb5867de9862e89ad1ecf7a8a60ae4ca9dfd6" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>6. 가사의 개별 타임코드를 바꾸는 방법입니다.<br>사실 앞 부분에서 전체 타임코드를 맞추면 대부분 싱크가 맞지만 하나씩 각개로 맞추어야 할 때도 있을 것입니다.<br>아래그림 상단에 마킹된 78.83 이란 부분은 78.83 초라는 시간을 의미합니다.<br>이걸 수정할 타임코드인 79.38 부분을 지우고 수작업으로 직접 입력합니다.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/94be779a4f6e6d24854a424c7805599b5c2dfac9" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/94be779a4f6e6d24854a424c7805599b5c2dfac9" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>7. 통라인 가사와 오디오 싱크를 다 맞추었으면 코드복사 버튼을 눌러서 스크립트를 카피합니다.<br>아름다운 AI 여성의 상냥한 효과음도 첨가하였습니다. 원하는 곳으로 붙여넣기 하시면 되겠습니다.<br>동시에 수정한 타임코드가 기입된 새로운 lrc 파일을 다운로드할 수 있는 빨간색 버튼이 생겨납니다.<br>수정본 lrc 파일은 처음부터 UTF-8 로 인코딩해 놓았습니다. 가사 백업용으로 활용하시기 바랍니다.<br>파일이름은 artworld.lrc 로 저장이 됩니다.<br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/3a7605d374d589eaa80ef33f35ef97d75bfb38c7" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/3a7605d374d589eaa80ef33f35ef97d75bfb38c7" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>8. 가장하단에는 초시간 부분만 따로 배열을 만들어서 복사할 수 있게 해 놓았습니다.<br>이건 큰 필요가 없을 수도 있겠으나 비타주리는 한번씩은 필요한 배열이라서 기왕 만든 김에 약간 시간투자를 더 하였습니다. <br><br><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1ZdFf/7a2d972ce626e2180c5251867919b9a884082ab8" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1ZdFf/7a2d972ce626e2180c5251867919b9a884082ab8" data-origin-width="960" data-origin-height="540"></div><br><br></td></tr><tr><td style="width: 100%; text-align: center;"><br>9. 무언가가 엉켰으면 "처음으로" 버튼을 눌러서 다시 세팅을 하세요.<br>좌하단에는 기본창과 풀모드창의 토글버튼이 있으니 때에 따라 활용하십시오.<br>원래 웹에 업로드한 파일을 부르는 코딩보다 로컬(내컴)에 있는 파일을 부르는 코딩은<br>웬만한 웹 프로그래머도 사용하기 어려운 세심함을 요구합니다.<br>하도 가사 타임코드와 싱크 맞추기가 어렵다고 하소연하는 분들이 계셔서 작정하고 컴과 웹을 연결하는 방식의 코딩을 해 보았습니다.<br>그럼에도 불구하고 이게 어렵다는 분들에게는 제가 이제 드릴 말씀이 없을 것 같습니다. 무지 쉬우니 금방 따라 하실 것입니다.<br><br></td></tr></tbody></table></div>
<!-- -->
첫댓글 제가 여태까지 만든 것 중에서 가장 상위 난이도에 해당하는 코딩 결과물입니다. 유용하게 사용하세요.
수고하신 가사편집 에디터 잘사용하겠습니다 수고하셨습니다.~~추천~~
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
와!!!
사용하기 쉽게 가사편집 에디터를 만들어주셨네요.
잘 사용하겠습니다.
수고 많이 하셨습니다.
추천합니다
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
와~ 전 먼 말인지 전혀 모르겠음요...
저도 이제 스위시 설치 했으니..차차 알게 되겠네요
여긴 꼭 배워야 할 것 같으니
즐겨 찾기를 해 둘랍니다 ~ 감사합니다 ^^
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
회원님들을 위해 무지 고생하시는 울 주리님...
감사하고 또 감사합니다.
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
편하게 사용하도록 나눔 주신 주리님 마음 감사합니다 ^^
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
강좌 감사 합니다 지기 님..
6번사항과 7번사항을 새로이 업뎃했습니다. 다시 읽어보시기 바랍니다.
네에 ~ 세심한 배려로 좀더 수월한 작업이 되겠어요 ~ 수고하셨습니다 ~ 감사드립니다 ~ ^^
당분간 에디터나 몇개 더 만들려구요. 회원등급 조절후에 영상소스 나눔할 생각입니다.^^