블로그나 웹싸이트 BGM으로 Soundcloud 활용하기(+SoundCloud random 재생)

반응형

현제 이 블로그의 BGM은 Soundcloud 에서 재생목록을 가져와서 사용중에 있습니다.



위에 표시한 것처럼 블로그 타이틀 상단에 soundcloud 재생 iframe을 배치하였습니다.

위와 같은 방법으로 BGM을 삽입할 경우 블로그내에서 페이지 이동시 음악이 끊기고 

다른곡으로 넘어가는 단점이 있긴하지만 저는 위와 같이 하였습니다.


또한 SoundCloud iframe 삽입시 장점을 뽑자면



장점1. 음원을 자신의 싸이트에 업로드 하지 않아도 된다.(저작권 문제에서 조금더 유리함)

                • 참고1. 유튜브 동영상 스크랩시 저작권 관련 : http://kiss7.tistory.com/382 (요약하자면 유튜브영상의 스크랩시 저작권자가 스크랩한 블로그나 웹페이지의 주인에게 문제제기시 책임이 스크랩한 사람에게도 있단 얘기)
                • 참고2. SoundCloud의 경우도 비슷한 공유기능이 있으나, 애초에 자신이 직접 만든 컨텐츠(저작권 문제가 없는)를 업로드하게 되어 있으며 업로드시 스크랩 및 공유와 관련하여 업로더가 설정하게 되어 있으므로 대부분의 책임을 업로더가 지게 되어 있음


장점2. youtube와 달리 광고를 듣지 않아도 됩니다.


장점3. Playlist 변경시 소스코드를 변경할 필요가 없습니다. SoundCloud에 만들어둔 playlist를 수정하면 됩니다.



이 방법이 싫으신 분은 SCMplayer 를 이용하여 문제를 해결할 수는 있으나 이마저도 단점이 있습니다.


단점1. 처음 페이지 로딩시 프레임셋 변화를 위해 짧은 순간이긴 하지만 이미 로딩된 페이지를 새로고침 하여 다시 엽니다.


단점2. 미관상 SCMplayer가 눈에 잘 띄지 않아서 처음 방문하시는 분은 배경음악이 있는지 잘 모릅니다. 자동재생을 해두어서 소리가 날경우 배경음악을 인지 하더라도 어디서 켜고 끄는지 찾는데 조금 애먹습니다.


단점3. SoundCloud에서 외부재생이 허용되지 않은 곡들은 재생이 되지 않습니다.
         이 경우 SoundCloud를 선택할지 Scmplayer를 선택할지 결정하셔야 합니다.


단점4. SoundCloud를 대신하여 youtube를 이용할 수 있으나 광고가 많아서 BGM앞에 광고를 듣게됩니다 그 외 방법으로 자신이 호스팅한 곳에 업로드를 하여 링크할 수 있으나 저작권 문제에 휘말릴 수 있습니다.


저는 일단 페이지 새로고침과 재생이 되지않는 곡들 때문에 SoundCloud Embed 방법을 택했습니다.


SCMplayer를 이용하시고자 하는 분은 아래 와 같이 play list를 선택하는 단계에서 

RSS Podcast / SoundCloud Sets를 선택하시어 진행하시면 됩니다.



SoundCloud Iframe 삽입방법


1. SoundCloud 계정만들기 > 로그인 > 재생목록(PlayList) 만들기 는 생략하겠습니다. 여기까진 알아서 진행해주시구요


2. 원하는 곡을 모아 재생목록이 만들어졌거나 다른분들이 만들어둔 것을 선택하여 "Share"버튼을 누릅니다.

저의 경우는 제가 piano 곡으로만 선별하여 재생목록(https://soundcloud.com/goohwan/sets/bgm-for-blog)을 만들었습니다.



"share"버튼을 누른뒤 팝업이 뜨면 상단의 embed를 선택하고 소스코드를 선택하여 복사합니다.



3. 클립보드에 복사한 소스를 티스토리의 관리자 페이지 >> HTML/CSS 편집에 들어가셔서 <BODY> 태그 바로 아래에 집어 넣으면 됩니다.




4. 자동시작 및 랜덤재생 (auto_start, random play)

저의 경우 배경음악이 자동재생되도록 "auto_play=true" 로 변경하였습니다. 

또한 처음 실행시 랜덤곡이 되도록 아래 코드를 이용하여 "Start_track= "의 값에 1~21까지의 랜덤정수가 들어가도록 코드를 변경하였습니다. 활용하실 분은 아래 코드를 활용하여 재생목록의 곡수와 재생목록의 src에 해당하는 값을 변경하여 사용하시면 됩니다.



위 코드를 <head>,</head>  태그 사이에 넣어주세요


위 코드를 <body> 태그 아래에 넣어주세요



반응형