유튜브 찬송가 645 js 파일 정보
유튜브 찬송가 645 js 파일![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
본문
요즘 아는 지인의 부탁으로 온라인 교회 홈페이지를 만들고 있는데...
하도 찬송가 전곡을 홈페이지에 깔아달라고 해서...
유튜브에서 플레이리스트 하나 파싱하여 js 파일로 만들어 보았습니다.
https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js
사용하기에 따라 무궁무진한 자료를 만들 수 있을 거에요.
결과물은 http://www.mediaplayer.kr/main/bbs/html_editor.php
의 좌측창에 소스입력 후 결과보기 클릭해 보세요.
아주 간단하게 찬송가 201장부터 230장까지 가로 4단 정렬하여 썸네일 동영상 코드를 만들어 보았습니다.
유튜브에 전체 동영상을 공유하신 분은 비컴퍼니입니다.^^
<script src=https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js></script>
<script>
startHymn = 201;
lastHymn = 230;
widthCut = 4;
document.write("<div id=ytDiv></div>");
ytDiv.style.height = ytDiv.offsetWidth * 9 / 16 + "px";
function ytHtml(yt) {
ytDiv.innerHTML = "<iframe style=width:100%;height:100%;display:block src=https://www.youtube.com/embed/" + (this['numberList_' + yt][2]) + " frameborder=0 allowfullscreen></iframe>";
}
for (i = startHymn; i <= lastHymn; i++) {
document.write("<img id=yt_" + i + " style=width:" + 100 / widthCut + "%;display:block;float:left;cursor:pointer src=https://img.youtube.com/vi/" + this['numberList_'+i][2] + "/mqdefault.jpg>");
this["yt_" + i].num = i;
this["yt_" + i].onclick = function() {
ytHtml(this.num);
}
}
this["yt_" + startHymn].onclick();
</script>
추천
10
10
댓글 29개
![](http://sir.kr/data/member_image/na/naver_ve59i12o.gif?1716206209)
대단하십니다. 감사합니다.
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@들레아빠
이거 유튜브에 플레이리스트가 있어서 1시간이면 아주 넉넉하게 크롤링이 끝나겠거니 싶었는데 자꾸 한곡이 삑사리가 나서 3시간이나 걸렸네요.ㅜㅠ
"하늘가는 밝은 길이" 그 곡이 누락이 되었더라구요.
js로 xml 로 json 으로 모두 추출해 놓았습니다.
코드를 조금 세련되게 사용하면 가사검색도 사용이 가능하고 가나다순 정렬도 가능하며
첫곡을 제외한 자동재생 및 연속 이어듣기, 한곡 반복듣기, 한곡 한번만 듣기 등도 가능합니다.
이거 유튜브에 플레이리스트가 있어서 1시간이면 아주 넉넉하게 크롤링이 끝나겠거니 싶었는데 자꾸 한곡이 삑사리가 나서 3시간이나 걸렸네요.ㅜㅠ
"하늘가는 밝은 길이" 그 곡이 누락이 되었더라구요.
js로 xml 로 json 으로 모두 추출해 놓았습니다.
코드를 조금 세련되게 사용하면 가사검색도 사용이 가능하고 가나다순 정렬도 가능하며
첫곡을 제외한 자동재생 및 연속 이어듣기, 한곡 반복듣기, 한곡 한번만 듣기 등도 가능합니다.
![](http://sir.kr/data/member_image/na/naver_ve59i12o.gif?1716206209)
@비타주리 말씀하신 내용으로 업데이트가 된다면 정말 많은 곳에서 활용 할 수 있겠습니다.
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
정말 대단하십니다. 언뜻 보아도 다양하게 사용이 될 수있을것 같습니다.
메뉴에 1~100장, 101~200장 이런식으로 할 수있고 전체를 다 한페이지에 나오게해도 좋을 것 같습니다.
적용해보니 js파일의 배열 3번째 것을 바꾸니 유튜브영상이 변하는데요.
자신이 올린 유튜브영상이나 좋아하는 영상을 lyricsList_에 적용하면 자신의 유튜브리스트를 만들수도 있겠습니다.
50장씩 적용해보았습니다.
http://gratia.kr/zz/hymn/591_645.php
링크에서 "내일일은 난 몰라요"는 유튜브아이디를 바꾸면 영상이 바뀌는지 테스트한다고 임으로 넣은 것입니다. 제가 만든 영상이기도 하고요.
정성과 노력이 많이들어간 자료를 공개해주시니 고마울 따름입니다.
감사합니다.^^
메뉴에 1~100장, 101~200장 이런식으로 할 수있고 전체를 다 한페이지에 나오게해도 좋을 것 같습니다.
적용해보니 js파일의 배열 3번째 것을 바꾸니 유튜브영상이 변하는데요.
자신이 올린 유튜브영상이나 좋아하는 영상을 lyricsList_에 적용하면 자신의 유튜브리스트를 만들수도 있겠습니다.
50장씩 적용해보았습니다.
http://gratia.kr/zz/hymn/591_645.php
링크에서 "내일일은 난 몰라요"는 유튜브아이디를 바꾸면 영상이 바뀌는지 테스트한다고 임으로 넣은 것입니다. 제가 만든 영상이기도 하고요.
정성과 노력이 많이들어간 자료를 공개해주시니 고마울 따름입니다.
감사합니다.^^
![](http://sir.kr/data/editor/2206/b55de823ef11060ff3016df453f848f6_1654689138_0781.png)
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
비컴퍼니분들께 감사해야지요.
그 기독교 컨텐츠 제작 회사는 찬송가공회에서 저작권을 구입해서 유튜브로 오픈해 주었으니 많은 분들이 쉽게 유튜브로 이런 내용들을 접할 수 있습니다.
사실 찬송가 mp3 와 ppt 파일을 모달창으로 연동한 컨텐츠는 제가 만들어 놓은 것이 있습니다만 저작권 때문에 공유를 못하고 있지요.
잠시 코드에 양념을 한번 더 치자면... 찬송가 제목이 표시되고
가장 아래의 버튼을 클릭해도 부드럽게 동영상 부분으로 올라옵니다.
이건 약간만 머리를 굴리면 페이징 처리가 가능하므로 1번부터 645번까지 한 페이지로도 충분합니다.
그리고 nemberList 가 1장부터 645장 까지라면 lyricsList_ 는 가사 가나다순입니다.
마지막으로 krList 는가나다 그룹이구요. 나중 가사검색을 용이하게 하려고 순차변수를 더 만들어 놓은 거에요.
그 기독교 컨텐츠 제작 회사는 찬송가공회에서 저작권을 구입해서 유튜브로 오픈해 주었으니 많은 분들이 쉽게 유튜브로 이런 내용들을 접할 수 있습니다.
사실 찬송가 mp3 와 ppt 파일을 모달창으로 연동한 컨텐츠는 제가 만들어 놓은 것이 있습니다만 저작권 때문에 공유를 못하고 있지요.
잠시 코드에 양념을 한번 더 치자면... 찬송가 제목이 표시되고
가장 아래의 버튼을 클릭해도 부드럽게 동영상 부분으로 올라옵니다.
이건 약간만 머리를 굴리면 페이징 처리가 가능하므로 1번부터 645번까지 한 페이지로도 충분합니다.
그리고 nemberList 가 1장부터 645장 까지라면 lyricsList_ 는 가사 가나다순입니다.
마지막으로 krList 는가나다 그룹이구요. 나중 가사검색을 용이하게 하려고 순차변수를 더 만들어 놓은 거에요.
<script src=https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js></script>
<script>
startHymn = 201;
lastHymn = 230;
widthCut = 4;
document.write("<div id=ytDiv></div><div id=titleDiv style=padding:15px;text-align:center></div>");
ytDiv.style.height = ytDiv.offsetWidth * 9 / 16 + "px";
function ytHtml(yt) {
ytDiv.innerHTML = "<iframe style=width:100%;height:100%;display:block src=https://www.youtube.com/embed/" + (this['numberList_' + yt][2]) + " frameborder=0 allowfullscreen></iframe>";
}
for (i = startHymn; i <= lastHymn; i++) {
document.write("<img id=yt_" + i + " style=width:" + 100 / widthCut + "%;display:block;float:left;cursor:pointer src=https://img.youtube.com/vi/" + this['numberList_'+i][2] + "/mqdefault.jpg>");
this["yt_" + i].num = i;
this["yt_" + i].onclick = function() {
ytHtml(this.num);
titleDiv.innerText = this.num + "장 : " + window["numberList_" + this.num][1];
scrollTo({top:0, behavior:"smooth"});
}
}
this["yt_" + startHymn].onclick();
</script>
멋지네요. 지금 작업중인 사이트에 나중에 붙여야겠습니다. ^^
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@호텔천사 http://lhch.kr/church/9/ 이 페이지 만들어지면 그 코드 드릴게요.
미가엘식으로 가사검색까지 가능하고 전곡연속듣기, 한곡무한반복, 한곡한번듣기 등을 선택할 수 있게 하려구요.
미가엘식으로 가사검색까지 가능하고 전곡연속듣기, 한곡무한반복, 한곡한번듣기 등을 선택할 수 있게 하려구요.
@비타주리 링크된 교회 담임목사님이 웹툰갤러리에서 본 "새벽을 깨우리로다"를 그리신 분이시군요. 온라인교회라 그런지 모바일전용으로 작업하시는 것 같습니다. 필요한 기능이 알차게 잘 들어가 있어서 좋아보입니다. 디자인도 좋고요^^
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@비타주리 중, 대형교회만 스폿트라이트를 받는데요.
한국교회의 70프로정도가 재정적으로 미자립이라는 글을 본적이 있습니다.
출석교인이 30명 미만의 교회로 건물에 세얻어서 하나님의 사명을 전하는 교회가 훨씬 더 존중받아야 한다고 생각합니다.
비타주리님께서 만든 모바일 홈페이지를 보고 든 생각인데요.
비타주리님께서 모바일홈페이지 소스를 공개해주시면 미자립교회 무료로 홈페이지 만들어주기를 하면 어떨까 생각해봤습니다.
한국교회의 70프로정도가 재정적으로 미자립이라는 글을 본적이 있습니다.
출석교인이 30명 미만의 교회로 건물에 세얻어서 하나님의 사명을 전하는 교회가 훨씬 더 존중받아야 한다고 생각합니다.
비타주리님께서 만든 모바일 홈페이지를 보고 든 생각인데요.
비타주리님께서 모바일홈페이지 소스를 공개해주시면 미자립교회 무료로 홈페이지 만들어주기를 하면 어떨까 생각해봤습니다.
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@김철용 일단 소스는 나중에 함수코딩으로 정리하는 것이 우선입니다. 그래야 대입이 쉽거든요.
@비타주리 감사합니다. ^^
![](http://sir.kr/data/member_image/na/naver_s82r0a3b.gif?1505968671)
정말 잘 만드셨네요. 대단하십니다. ^^
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@민트다이어리 감사합니다. 유용하게 쓰십시오.
![](http://sir.kr/data/member_image/to/todl.gif?1498779066)
와 감사합니다
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@DawnDew 감사합니다.
비타주리님 넘 감사드려요...
은혜롭게 잘 사용하겠습니다 ^^*
은혜롭게 잘 사용하겠습니다 ^^*
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@몽당s연필 늘 감사합니다.
이런 자료 추천 합니다~^^
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@유진아버지 감사합니다.
좋네요
천재적이십니다~~
천재적이십니다~~
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@라온헤윰 제가 천재면 지구상의 모든 사람이 천재입니다.ㅋ
스크랩합니다
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@라온헤윰 감사합니다
![](http://sir.kr/data/member_image/go/google_eus72gcb.gif?1655134712)
감사 합니다.~
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@junlim 감사합니다
![](http://sir.kr/data/member_image/go/google_udq8s16j.gif?1660821725)
오.. 혹시 유튜브 저작권에 걸리지는 않는지요?
![](http://sir.kr/data/member_image/wi/wittazzurri.gif?1622770717)
@코드오타쿠 그건 본인이 한번 알아보세요.
제가 알기로 유료재배포가 아니라면 그냥저냥 넘어가는 것 같아요.
제가 알기로 유료재배포가 아니라면 그냥저냥 넘어가는 것 같아요.