사운드 클라우드 음원 게시물에 삽입하기

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

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

삽입방법

  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 코드를 생성하고 메모합니다.

사운드 클라우드 공유 코드에는 iframe이 사용됩니다. 아임웹은 사이트 보안을 위해 HTML 에디터에 iframe 사용을 제한하고 있기 때문에, 아래 도움말에 따라 iframe 사용을 허용하는 도메인으로 사운드 클라우드를 추가해줘야 합니다.

참고: 유튜브, 페이스북, 네이버, 구글, 트위치는 별도로 iframe 허용 설정을 하지 않아도 기본으로 작동합니다.
  1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
  2. 왼쪽 메뉴에서 [환경설정 > 보안·개인정보 보호]를 클릭해 이동합니다.
  3. 사이트 보안 설정 항목에서 iframe 사용 시 허용되는 도메인 등록 옵션 아래 허용하는 서비스 도메인으로 soundcloud.com 을 입력합니다.

  4. 저장 버튼을 클릭해 적용합니다.
  1. 아임웹 관리자 페이지 왼쪽 상단의 사이트 바로가기를 클릭해 내 사이트에 접속합니다.
  2. 사운드 클라우드 음원을 삽입할 게시판 메뉴로 이동합니다.
  3. 게시판 글쓰기 버튼을 클릭합니다.
  4. 게시물 제목을 작성합니다.
  5. 텍스트 에디터 도구에서 코드보기 </> 아이콘을 클릭합니다.

  6. 위 1단계에서 메모한 사운드 클라우드 Embed 코드를 붙여넣습니다.

  7. 다시 텍스트 에디터 도구에서 코드보기 </> 아이콘을 클릭하면, 사운드 클라우드 트랙이 표시됩니다.

    주의: 다시 코드보기 </> 아이콘을 클릭하지 않으면 삽입한 Embed 코드가 초기화 됩니다.

  8. (선택 사항) 만약 오디오 플레이가 지나치게 크다고 생각되는 경우, 아래 그림과 같이 퍼센트(%) 지정된 width 값을 변경해 크기를 줄일 수 있습니다.

  9. 문제가 없다면 오른쪽 상단의 작성 버튼을 클릭해 삽입을 완료합니다.

관련 도움말

코드 위젯을 사용하여 페이지에 사운드 클라우드 오디오 플레이어를 삽입할 수도 있습니다. 자세한 방법은 아래 도움말 링크에서 확인해 주세요.

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

목록으로