SCM Music Player 설치
티스토리 블로그에서 좋아하는 음악을 배경음악으로 사용할 수 있는 방법 중 하나인 SCM Music Player라는 신통방통한 뮤직플레이어를 설치하는 방법을 알아보도록 하겠습니다.
설치가 완료된 모습
우선 설치가 완료된 화면부터 한번 보시겠습니다.
위 이미지처럼 저의 티스토리 블로그 상단에 SCM Player가 삽입된 모습입니다. 이렇게 상단에 배치할 수 돈 있고 하단에 배치할 수 도 있습니다. 플레이어의 위치는 사용하시는 분이 원하는 위치에 배치하시면 되겠습니다.
설치 시작
이제 SCM Music player를 설치해 보겠습니다.
SCM Music Player - seamless music for your website
Tumblr Music Player for 2022. SCM Music Player is a free and open source web music player, that brings a seamless music experience to your website. Support Tumblr, Blogger, Weebly, Tistory and more. Continous Playback Cross Pages - Seamless playback throug
www.scmplayer.net
위 공식 사이트에 접속하면 아래와 같은 화면을 볼 수 있습니다.
여기 이미지에서 확인해야 하는 중요한 부분은 붉은색으로 표시된 곳입니다.
- 스킨 중 마음에 드는 것을 선택.
- 선택 후 NEXT버튼을 눌러 다음 페이지로 이동.
- 마음에 드는 스킨이 없을 경우 3번 Find Custom Skins를 클릭.
※ 4번 Import Profile은 나중에 블로그에 넣을 소스코드가 완성되고, 추가로 재생 옵션 변경 또는 새로운 음악을 추가하고 싶을 때 사용하는 기능입니다.
아래 보이는 이미지가 Find Custom Skins 버튼을 클릭하여 이동한 모습입니다.
SCM Player는 많은 커스텀 스킨을 제공하고 있는데, 이 중 맘에 드는 스킨을 찾아 Choose 버튼을 눌러 원하는 스킨을 선택 후 다음 화면으로 넘어가면 됩니다.
음악 추가
원하는 스킨을 선택하였으면, 이제는 음악을 추가해 보겠습니다.
소유하고 있는 MP3 파일의 URL을 넣을 수도 있고, SoundCloud나 유튜브의 링크를 URL 입력란에 넣으면 됩니다. 추가로 입력칸이 더 필요할 경우 Add more Songs 버튼을 눌러 입력칸을 추가할 수 있으며, 음악 추가 단계를 모두 마치면, Next 버튼을 눌러 재생 옵션 선택 단계로 넘어가게 됩니다.
- Song Title - 음악 제목
- Song URL - MP3나 유튜브 등의 주소
재생 옵션 설정
스킨 선택과, 음악 선택을 마쳤으면, 이젠 재생 옵션을 설정해 보겠습니다.
PLAYBACK (재생 관련 설정)은 다음과 같습니다.
- Auto Play: 자동 재생 (블로그나 사이트가 열리면 자동으로 재생할지에 대한 여부)
- Shuffle Playback:- 셔플 기능으로, 선택하면 순차적이 아닌 임의의 순서로 음악을 재생
- Default Volume: 기본 볼륨 (50%가 적당하며 시끄러운 음악을 올리고 싶다면 그보다 작은 볼륨을 추천)
- Repeat Mode: 플레이리스트 1번 재생, 계속 반복, 한곡 반복 등의 옵션을 선택할 수 있다.
- appearance (외형 관련 설정)
- Placement of Player Bar: 음악재생 바를 화면 상단 혹은 하단에 둘 지를 선택.
- Show Playlist by Default: 플레이리스트를 기본적으로 보여줄 것인지에 대한 여부
※ 플레이리스트 화면은 아래 이미지의 빨간 박스를 참조
스크립트 제공
모든 설정을 마치고 완료(Done) 버튼을 클릭하면 블로그 및 웹사이트에 뮤직플레이어를 첨부할 수 있는 스크립트가 발급됩니다.
제공받은 스크립트를 복사 후 티스토리 블로그 HTML 편집에서 body 적당한 위치에 붙여 넣으면 SCM Player 설치가 완료됩니다.
<!-- 빨간 네모 박스 아래 구문 -->
플레이리스트 추가 : {'title':'김예림 - Rain','url':'https://www.youtube.com/watch?v=qlMXZvY-_cM'}빨간 네모 박스 아래 구문은 나중에 유튜브 주소만으로 음악 추가를 쉽게 하기 위해서 넣어둔 거니까 무시하셔도 됩니다. 저처럼 추가하실 분들은 소스코드를 잘 보시고 중간에 집어넣으시면 될 듯합니다.
마무리 팁
아래 이미지는 Import Profile 화면입니다.
위에서 이미 설명했지만, 기존 플레이어에 음악을 추가하거나 스킨을 변경하고자 할 때는 새로 발급받아도 무방하겠지만, 전에 발급받은 소스코드를 위 Import Profile 메뉴에 붙여 넣으면 기존에 선택했던 스킨, 음악 목록 등을 그대로 다시 가져올 수 있습니다.
