유튜브에 가사 달기
페이지 정보
본문
<script src=https://www.youtube.com/iframe_api></script>
<script>
function onYouTubeIframeAPIReady() {
divPlayer = new YT.Player('iframePlayer', { events: {'onReady': onPlayerReady} });
}
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
<style>
.divLrc { margin-top:5px; width:800px; padding:10px; text-align:center; border:1px solid #cccccc; box-sizing:border-box; }
</style>
<div id=divPlayer><iframe id=iframePlayer style=width:800px;height:500px src=https://www.youtube.com/embed/ns5f2Ta-8i8?loop=1&playlist=ns5f2Ta-8i8&enablejsapi=1 frameborder=0 allowfullscreen></iframe></div>
<div id=lrcDiv_1 class=divLrc style=font-weight:bold;color:#ff0000>가수 : 김돈규</div>
<div id=lrcDiv_2 class=divLrc>제목 : 나만의 슬픔</div>
<textarea id=lrcText style=display:none>
[00:00.00]가수 : 김돈규
[00:16.00]제목 : 나만의 슬픔
[00:34.00]내소식
[00:37.00]그녀가 들을때 쯤엔
[00:40.70]난 아마
[00:42.62]세상 어디도 없겠지
[00:49.69]친구야
[00:52.08]내게 허락된 시간이
[00:55.81]이젠 다 되어가나봐
[01:02.58]알리진 말아줘
[01:06.38]차라리 그녀가 모르게
[01:11.12]아무런 슬픔도
[01:14.47]남기긴 싫어
[01:17.81]연락이 닿아도
[01:21.58]올수가 없을거야
[01:26.41]이제는
[01:28.39]다른 세상에서 워워
[01:34.97]그녀를 만나서
[01:38.83]내얘길 묻거든
[01:42.61]그저 난 잘있다고
[01:45.89]대답해줘
[01:50.18]이제야 알겠어
[01:54.02]그녀가 내게는
[01:57.82]얼마나 소중했는지
[02:05.82]가슴이 메어와
[02:30.41]나 훗날 재되면
[02:34.09]그녀가 다니는 길목에
[02:38.76]아무도 모르게
[02:41.95]흩어놓아줘
[02:45.29]가끔씩 오가는
[02:49.10]그모습만이라도
[02:53.93]그길에 남아
[02:56.36]볼수있게 워
[03:02.52]그녀를 만나서
[03:06.32]내얘길 묻거든
[03:10.08]그저 난 잘있다고
[03:13.47]대답해줘
[03:17.77]이제야 알겠어
[03:21.58]그녀가 내게는
[03:25.42]얼마나 소중했는지
[03:47.75]약속해줘
[03:51.99]나없는 세상에
[03:55.79]남겨진 그녀를
[03:59.60]나대신 지켜준다고
[04:07.64]그녀를 부탁해</textarea>
<script>
transLrs = (lrcText.value.indexOf("[al:") > -1 ? lrcText.value.split("[al:")[1] : "]\n" + lrcText.value).split("\n[");
lrcTotal = transLrs.length - 1;
for (lrc = 1; lrc <= lrcTotal; lrc++) {
lrcTime = Number(transLrs[lrc].split("]")[0].split(":")[0] * 60) + Number(transLrs[lrc].split("]")[0].split(":")[1]);
this["lrc_" + lrc] = [lrcTime, transLrs[lrc].split("]")[1]];
}
function lrcMode() {
for (lrc = 1; lrc <= lrcTotal; lrc++) {
if (divPlayer.getCurrentTime() > this["lrc_" + lrc][0]) {
lrcDiv_1.innerText = this["lrc_" + lrc][1];
lrcDiv_2.innerText = lrc == lrcTotal ? "감사합니다" : this["lrc_" + (lrc + 1)][1];
}
}
}
setInterval(lrcMode, 10);
</script>
<script>
function onYouTubeIframeAPIReady() {
divPlayer = new YT.Player('iframePlayer', { events: {'onReady': onPlayerReady} });
}
function onPlayerReady(event) {
event.target.playVideo();
}
</script>
<style>
.divLrc { margin-top:5px; width:800px; padding:10px; text-align:center; border:1px solid #cccccc; box-sizing:border-box; }
</style>
<div id=divPlayer><iframe id=iframePlayer style=width:800px;height:500px src=https://www.youtube.com/embed/ns5f2Ta-8i8?loop=1&playlist=ns5f2Ta-8i8&enablejsapi=1 frameborder=0 allowfullscreen></iframe></div>
<div id=lrcDiv_1 class=divLrc style=font-weight:bold;color:#ff0000>가수 : 김돈규</div>
<div id=lrcDiv_2 class=divLrc>제목 : 나만의 슬픔</div>
<textarea id=lrcText style=display:none>
[00:00.00]가수 : 김돈규
[00:16.00]제목 : 나만의 슬픔
[00:34.00]내소식
[00:37.00]그녀가 들을때 쯤엔
[00:40.70]난 아마
[00:42.62]세상 어디도 없겠지
[00:49.69]친구야
[00:52.08]내게 허락된 시간이
[00:55.81]이젠 다 되어가나봐
[01:02.58]알리진 말아줘
[01:06.38]차라리 그녀가 모르게
[01:11.12]아무런 슬픔도
[01:14.47]남기긴 싫어
[01:17.81]연락이 닿아도
[01:21.58]올수가 없을거야
[01:26.41]이제는
[01:28.39]다른 세상에서 워워
[01:34.97]그녀를 만나서
[01:38.83]내얘길 묻거든
[01:42.61]그저 난 잘있다고
[01:45.89]대답해줘
[01:50.18]이제야 알겠어
[01:54.02]그녀가 내게는
[01:57.82]얼마나 소중했는지
[02:05.82]가슴이 메어와
[02:30.41]나 훗날 재되면
[02:34.09]그녀가 다니는 길목에
[02:38.76]아무도 모르게
[02:41.95]흩어놓아줘
[02:45.29]가끔씩 오가는
[02:49.10]그모습만이라도
[02:53.93]그길에 남아
[02:56.36]볼수있게 워
[03:02.52]그녀를 만나서
[03:06.32]내얘길 묻거든
[03:10.08]그저 난 잘있다고
[03:13.47]대답해줘
[03:17.77]이제야 알겠어
[03:21.58]그녀가 내게는
[03:25.42]얼마나 소중했는지
[03:47.75]약속해줘
[03:51.99]나없는 세상에
[03:55.79]남겨진 그녀를
[03:59.60]나대신 지켜준다고
[04:07.64]그녀를 부탁해</textarea>
<script>
transLrs = (lrcText.value.indexOf("[al:") > -1 ? lrcText.value.split("[al:")[1] : "]\n" + lrcText.value).split("\n[");
lrcTotal = transLrs.length - 1;
for (lrc = 1; lrc <= lrcTotal; lrc++) {
lrcTime = Number(transLrs[lrc].split("]")[0].split(":")[0] * 60) + Number(transLrs[lrc].split("]")[0].split(":")[1]);
this["lrc_" + lrc] = [lrcTime, transLrs[lrc].split("]")[1]];
}
function lrcMode() {
for (lrc = 1; lrc <= lrcTotal; lrc++) {
if (divPlayer.getCurrentTime() > this["lrc_" + lrc][0]) {
lrcDiv_1.innerText = this["lrc_" + lrc][1];
lrcDiv_2.innerText = lrc == lrcTotal ? "감사합니다" : this["lrc_" + (lrc + 1)][1];
}
}
}
setInterval(lrcMode, 10);
</script>
가수 : 김돈규
제목 : 나만의 슬픔
- 이전글유튜브 아이프레임 리스트 플레이어 21.06.18
- 다음글유튜브에 컨트롤러 달기 21.06.18