유튜브 영상을 사용한 티스토리 배경음악 넣기 | SCM Music Player
유튜브 영상을 사용한 티스토리 배경음악 넣기를 해보겠습니다.
SCM Music Player 를 사용할 것인데요. 무료 오픈 소스 웹 플레이어로 누구나 블로그 등에 사용할 수 있습니다. 설명글을 보면 Blogger나 Tistory 에 사용할 수 있다고 명시해놨습니다.
이 방법의 장점은 나의 티스토리에서 음악을 스트리밍하는게 아니라
SCM Music Player 에서 자바스크립트 코드를 가져오고
음악은 유튜브에서 가져오기 때문에 내 티스토리의 부담이 전혀 없습니다.
티스토리 뿐만 아니라 워드프레스 등 자바스크립트를 사용할 수 있는 웹사이트라면 어디든지 사용할 수 있습니다.
유튜브에서 티스토리 배경음악 넣기
SCM Music Player 웹사이트에 들어갑니다.
SCM Music Player - seamless music for your website (scmplayer.net)
setup wizard 에서 스킨을 선택합니다.
스킨은 종류가 여러가지가 있고 커스텀 스킨도 4000개나 됩니다.
플레이리스트를 편집합니다. 곡의 타이틀과 유튜브의 URL을 붙여넣으면 됩니다.
마지막으로 자동재생할 것인지 셔플할 건지 볼륨 등 재생관리 설정을 합니다.
자바스크립트 코드가 만들어집니다.
아래 코드는 SCM Player 에서 생성한 코드입니다.
<!-- SCM Music Player https://www.scmplayer.net -->
<script type="text/javascript" src="https://www.scmplayer.net/script.js"
data-config="{'skin':'https://static.tumblr.com/su8juwr/TC9mqtz8d/simples1.css','volume':31,'autoplay':true,'shuffle':true,'repeat':0,'placement':'top','showplaylist':false,'playlist':[{'title':'%uC870%uC774 - %uC88B%uC740 %uC0AC%uB78C %uC788%uC73C%uBA74 %uC18C%uAC1C%uC2DC%uCF1C%uC918','url':'https://www.youtube.com/watch?v=hoLzH1revMg&list=RDhoLzH1revMg&start_radio=1&ab_channel=StoneMusicEntertainment'},{'title':'%uC544%uC774%uC720 - celebrity','url':'https://www.youtube.com/watch?v=0-q1KafFCLU&ab_channel=1theK(%EC%9B%90%EB%8D%94%EC%BC%80%EC%9D%B4)'},{'title':'%uC544%uC774%uC720 - eight','url':'https://www.youtube.com/watch?v=TgOu00Mf3kI&ab_channel=1theK(%EC%9B%90%EB%8D%94%EC%BC%80%EC%9D%B4)'},{'title':'%uC544%uC774%uC720 - Blueming','url':'https://www.youtube.com/watch?v=D1PvIWdJ8xo&ab_channel=1theK(%EC%9B%90%EB%8D%94%EC%BC%80%EC%9D%B4)'}]}" ></script>
<!-- SCM Music Player script end -->
티스토리 스킨편집에 들어가서 html 의 head 안에 붙여넣습니다.
블로그를 로드하면 아래와 같은 플레이어가 나와서 음악이 재생되면 성공입니다!
한 가지 주의할 점은 스트리밍 방식이라 유튜브 공식 뮤비같은 경우 용량이 커서 그런지 약간 끓기는 경우가 있습니다.
어차피 영상은 나오지 않으므로 유튜브 음악 영상중에 용량이 적은 버전을 사용하는게 좋을 듯 합니다.
자바스크립트에서는 코드의 동작 방식이 안보이지만 유튜브 영상의 mp3 추출 방식을 사용하는게 아닌가 싶습니다.
꼭 티스토리가 아니더라도 플레이 리스트는 몇십개라도 늘릴 수 있으니까 개인 감상용 웹사이트를 만들어서 사용하는 것도 가능합니다.
유튜브에서 다운로드 받는 방식이기 때문에 대량의 트래픽이 발생하는 사이트에서 사용하는 것은 혹시 모니터링의 위험이 있을 것 같네요.
하기사 일 방문자가 만명이 넘는 사이트라면 뭐든 외부 트래픽을 많이 사용할테니 주목의 대상이 될 수 있습니다. 그런데 페이지가 아니라 head 에 걸어놓기 때문에 트래픽이 더 많이 유발 될 수 있습니다.
그런 경우 사운드 클라우드나 다른 음원도 사용할 수 있다고 하니 적당히 여러 음원들을 분산시켜서 셔플로 사용하면 트래픽이 한쪽에 쏠리는 것을 막을 수 있을 겁니다.
마지막으로 이 프로그램에는 큰 단점이 있습니다.
SCM Player는 모바일에서 플레이가 안된다는 부분입니다. 요새는 모바일로 웹페이지를 많이 보는데 아쉬운 부분입니다.
