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

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

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

   

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

   

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

   

5. Embed 탭을 클릭합니다.

   

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

   

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

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

   

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

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

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

   

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

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

   

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

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

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

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