사운드 클라우드 음원 페이지에 삽입하기

사운드 클라우드에 올린 음악을 내 사이트로 불러와 방문자가 재생할 수 있도록 삽입할 수 있습니다. 디지털 음원 판매하기 위해 미리듣기를 제공하거나, 기타 이유로 음원 재생이 필요할 때 사용할 수 있습니다.

이 도움말에서는 사운드 클라우드에 올린 음원 트랙의 Embed(임베드, 삽입) 코드를 가져와 내 사이트에 삽입하는 방법을 설명합니다.

삽입방법

1단계: 사운드 클라우드 Embed 코드 생성하기

1. 사운드 클라우드에 접속 후 로그인합니다.

2. 오른쪽 상단의 프로필을 클릭하고, Tracks 를 클릭합니다.

   

3. 내 사이트에 삽입하려는 트랙 위에 마우스 포인터를 올리면 숨겨진 메뉴가 나타납니다. 여기서 더보기 ⋯ 아이콘을 클릭합니다.

   

4. 더보기 메뉴가 나오면 Share 를 클릭합니다.

   

5. Embed 탭을 클릭합니다.

   

   아래 그림과 설명을 참고해 사운드 클라우드 오디오 플레이어의 모양 및 색상, 옵션을 설정합니다.

   

   • 오디오 플레이어: 오디오 플레이어의 모양을 선택합니다.
   • Color: 버튼 등에 적용되는 색상을 선택합니다. 직접 컬러값을 입력하거나 선택할 수 있습니다.
   • Enable automatic play: 선택 시 음원을 자동 재생합니다. (이 기능은 모바일 기기 및 일부 브라우저에서 작동하지 않을 수 있습니다.)
   • 미리보기: 위에서 설정한 값에 따라 오디오 플레이어를 미리볼 수 있습니다.
   • Height: 오디오 플레이어의 높이를 선택합니다.

6. 오디오 플레이서 설정을 마쳤다면 자동 생성된 코드를 클릭 후 키보드 단축키(Windows: CTRL + C, Mac: command - C)를 눌러 복사합니다.

   

7. 복사한 Embed 코드는 메모장 등에 저장합니다.
8. (선택 사항) 여러 개의 트랙을 올린 경우, 위 3~8번 과정을 반복해 모든 트랙의 Embed 코드를 생성해 메모해 주세요.

2단계: 코드 위젯에 Embed 코드 삽입하기

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하여 새 메뉴를 생성하거나, 음원을 삽입할 메뉴명을 클릭해 이동합니다.
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 코드 위젯을 클릭합니다.

4. 페이지에 추가된 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

   

5. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.

6. 코드 설정 창 빈 칸에 위 1단계에서 복사한 코드를 붙여넣고, 저장 버튼을 클릭합니다.

   

7. 코드 설정 창 바깥 영역을 클릭해 입력을 완료합니다.

(선택 사항) 3단계: 더 많은 트랙 삽입하기

위 1~2단계를 반복해 2개 이상의 사운드 클라우드 트랙을 삽입할 수 있습니다. 트랙의 위치는 위 2단계에서 추가한 코드 위젯과, 추가한 코드 위젯들의 배치에 따라 달라집니다.

여러 개의 트랙을 아래와 그림과 같이 하나의 페이지에 삽입하는 경우, 코드 위젯을 이동해 원하는 모양에 맞게 배치해 주세요.

4단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 새 브라우저 탭이 나오고 음원이 정상적으로 표시되고 재생되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.