Plyr은 웹 형식의 동영상 및 오디오 플레이어를 구성하는데 사용되는 JavaScript 라이브러리입니다. Plyr은 다양한 미디어 형식을 지원하며, 그 중 하나는 사운드 클라우드 오디오입니다. 이 글에서는 Plyr을 사용하여 사운드 클라우드 API를 통해 오디오를 재생하는 방법에 대해 알아보겠습니다.

사운드 클라우드 API 키 발급

사운드 클라우드 API를 사용하기 위해 먼저 사운드 클라우드에서 API 키를 발급 받아야 합니다. 아래는 사운드 클라우드 개발자 포털에서 API 키를 얻는 과정입니다.

1. 사운드 클라우드 개발자 포털에 접속하여 계정을 만듭니다.
2. 로그인한 후 “Applications”을 클릭하고 “Register a new application”을 선택합니다.
3. 요구되는 정보를 입력하고 “Register” 버튼을 클릭합니다.
4. 등록이 완료되면 “API Keys” 섹션에서 발급받은 API 키를 확인할 수 있습니다.

Plyr에서 사운드 클라우드 오디오 재생하기

Plyr은 기본적으로 HTML 오디오 요소를 사용하여 오디오를 재생합니다. 사운드 클라우드 API를 사용하여 사운드 클라우드 오디오를 재생하기 위해서는 Plyr의 source 옵션을 사용해야 합니다.

const player = new Plyr('#audio-player', {
  controls: ['play', 'progress', 'current-time', 'mute', 'volume'],
  // 기본적인 컨트롤 설정

  sources: [
    {
      // 사운드 클라우드 API 키 및 트랙 URL 정보를 입력합니다.
      src: 'https://api.soundcloud.com/tracks/TRACK_ID/stream?client_id=SOUNDCLOUD_API_KEY',
      type: 'audio/mp3',
    },
  ],
});

위 코드에서 TRACK_ID에는 재생할 오디오 트랙의 식별자를 채워주어야 합니다. 또한, SOUNDCLOUD_API_KEY에는 앞에서 발급 받은 사운드 클라우드 API 키를 넣어야 합니다.

위 코드를 사용하면 Plyr 플레이어가 사운드 클라우드 오디오를 재생할 수 있습니다. 필요에 따라 Plyr의 다른 옵션들을 추가하거나 컨트롤러를 사용자 정의할 수도 있습니다.

결론

Plyr을 사용하면 웹 페이지에서 사운드 클라우드 오디오를 손쉽게 재생할 수 있습니다. 사운드 클라우드 API를 사용하여 Plyr과 통합하면 플레이어의 컨트롤과 스타일링을 더욱 자유롭게 변경할 수 있습니다.