티스토리에 뮤직 플레이어 달기 (SCM Player)

티스토리 블로그에도 배경음악을 넣을 수 있다. 자바스크립트 소스를 간단하게 넣을 수 있고, 음원은 유투브 링크로 음원만 재생이 가능하다. scm player라는 뮤직플레이어를 연동시키면 된다.

1. 우선 http://scmplayer.co/ 홈페이지로 이동한다.

2. 조금 아래로 내리면 셋업 화면이 뜬다. 여기서 우선 블로그에 달고자 하는 스킨의 종류를 선택한다. 다양한 컬러가 있으므로 스타일에 맞는것을 선택하고 가장 오른쪽에 라디오박스에 체크해준다.

3. 그리고 하단의 Next 버튼을 눌러 다음으로 이동한다.

4. 그러면 플레이 리스트 지정화면이 뜬다. 좌측에는 플레이어 리스트에 표시될 음악가 및 곡의 이름을 써준다. 그리고 우측에는 유투브 링크를 복사 붙여넣기 해준다. 미리 듣기도 가능(우측에 플레이 버튼 누르면 됨)

예시에는 젝스키스 곡으로 두 개만 일단 넣었지만 더 많은 곡 추가가 가능하다. 그리고 하단 우측에 넥스트 버튼을 눌러 다음 셋업 단계로 이동한다.

다음 단계는 재생시 옵션 지정하는 부분이다.

다 지정하고 우측 버튼의 Done을 눌러 셋업을 마치면 지정한 정보에 맞게 스크립트를 가공해서 출력해주게 된다.

아래와 같이 나오는데 이것을 전체 선택후, 복사해둔다.

이제 이것을 내 티스토리 블로그에 넣어주어야 한다. 관리자 메뉴에서 "HTML/CSS편집"클릭한 다음, HTML편집기 가운데 <body> 태그 안에 이 복사한 소스를 넣어주신다.

나의 경우 가장 아래로 내려서 </body> 바로 위에 붙여 넣어줬다.

이렇게 하고 저장하면 내 블로그에 플레이 리스트가 뜬다. 만약 오토플레이 체크하여 활성화 했다면 방문하자마자 노래가 나오게 된다.

만일 재생바가 짤린다면 붙여넣기 한 소스 바로 위에 <br/>태그를 넣어주면 정상적으로 보이게 된다.

또한 가장 우측 햄버거 메뉴를 누르면 아래처럼 지정해둔 플레이 리스트가 뜬다.

유투브 링크를 활용한 음원 재생 플레이어 scm player를 나의 티스토리 블로그에 연동시키는 방법을 적어보았습니다.

궁금한 분들은 참고 되시길 바랍니다.

* 참고한 원 링크 : http://soapqueen.tistory.com/194

Featured Lab