집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript SDK와 함께 SoundCloud API 사용

JavaScript SDK와 함께 SoundCloud API 사용

Christopher Nolan원래의: 2025-02-18 11:20:10364검색

JavaScript SDK와 함께 SoundCloud API 사용 키 테이크 아웃

SoundCloud API를 사용하면 개발자가 필요한 거의 모든 데이터에 액세스 할 수 있습니다. API는 SoundCloud 서버의 데이터에 대한 액세스를 제공하는 URL 모음이며 SDK (Software Development Kit)는 API를 쿼리하기위한 사전 작성된 라이브러리입니다. SDK에는 두 가지 버전이 있습니다. 그들 사이의 주요 차이점은 API에 비동기 요청이 이루어질 때 데이터를 반환하는 방법입니다. 최신 버전은 약속을 반환하는 반면 다른 버전은 매개 변수로 콜백 함수가 필요합니다. JavaScript를 사용하여 SoundCloud API를 쿼리하려면 SoundCloud에서 제공 한 JavaScript SDK를 다운로드해야합니다. 사용자 로그 인 기능의 경우 SDK의 이전 버전이 더 안정적이므로 권장됩니다.

SoundCloud API의 데이터는 간단한 GET 요청으로 액세스 할 수 있습니다. 사용자 별 데이터는 /ME 엔드 포인트를 사용하여 얻을 수 있지만 SoundCloud 계정을 사용하여 사용자가 웹 사이트에 로그인 한 경우에만. 클라이언트 측에서 API를 쿼리하면 백엔드의 복잡성에서 개발자를 절약 할 수 있습니다. SDK는 프로세스를 단순화하여보다 강력하고 사용자 친화적 인 웹 애플리케이션을 만들 수 있습니다.

이 기사는 Jamie Shields와 Wern Ancheta가 검토 한 동료였습니다. Sitepoint 콘텐츠를 최대한 활용 한 Sitepoint의 동료 검토 자 덕분에! SoundCloud는 개발자가 원하는 거의 모든 데이터를 얻을 수있는 API를 제공했습니다. 그러나 SoundCloud API 문서와 예제는 SDK (Software Development Kit)의 다른 버전을 사용하기 때문에, 특히 초보자에게는 혼란 스러울 수 있습니다. API와 SDK의 차이점은 무엇입니까? 기본적으로 API는 SoundCloud 서버의 데이터에 대한 액세스를 제공하는 URL 모음이며 SDK는 API를 쿼리하기위한 사전 작성된 라이브러리 (또는 클라이언트)입니다. 자세한 내용은이 토론을 참조하십시오.

시작하기

HTTP 및 API의 개념과 작업을 아는 것이 도움이 될 것입니다. API에 대해 더 많이 배우려면이 짧은 과정 인 API 소개를 권장합니다. 비동기 자바 스크립트, 약속 및 콜백에 대한 약간의 지식도 도움이 될 것입니다. jQuery는 코드 예제에 사용되므로 기본 사항을 아는 것은 아프지 않을 것입니다.

JavaScript를 사용하여 SoundCloud API를 쿼리하려면 SoundCloud에서 제공하는 JavaScript SDK를 다운로드해야합니다. 앞에서 언급했듯이 SDK에는 두 가지 버전이 있습니다.

사용 할 SDK의 어떤 버전?

그들 사이의 주요 차이점은 API에 비동기 요청이 이루어질 때 데이터를 반환하는 방법입니다. 최신 버전은 약속을 반환하는 반면 다른 버전은 매개 변수로 콜백 함수가 필요합니다. 내가 알아 차린 한 가지 문제는 문서에서 사용하는 SDK 버전을 사용하면 팝업 창이 자동으로 닫히지 않기 때문에 사용자 로그 인 기능에 문제가있는 것 같습니다.

. 따라서 단순성을 위해, 더 안정적이기 때문에이 튜토리얼의 예제에서 이전 버전을 사용합니다. 이 버전은 비동기 요청에 대한 콜백 함수가 필요합니다 SoundCloud api 기본 html 문서 를 설정하십시오 우리는 홈페이지 역할을하는 기본 HTML 페이지를 만들 것입니다. 우리는 또한 SDK를 여기에 포함시킬 것이므로 기능을 활용할 수 있습니다.

우리는 SoundCloud의 서버에서 직접 페이지에 SDK를 포함 시켰음에 주목하십시오. SDK를 다운로드하고 다음과 같이 참조 할 수도 있습니다.

SDK가 웹 페이지에 올바르게로드되는지 테스트하려면 :

브라우저에서 페이지를 엽니 다 (Chrome 권장) 브라우저에서 개발자 콘솔을 엽니 다 (크롬의 ctrl shift j

). 콘솔에서 SC를 입력하고 Enter를 누릅니다. Sc는 방금 포함 된 SDK에 의해 생성 된

javaScript 객체

입니다.

정의되지 않은 오류가 나타나면 올바르게로드되지 않습니다. 새로 고침을 시도하고 sdk 파일 (sdk.js)의 경로가 올바른지 확인하십시오. SoundCloud 앱

등록 SoundCloud 앱을 등록하려면 SoundCloud 계정 만 있으면됩니다. 아직 없다면 계속해서 가서 만들어주세요. 앱을 등록하면 SoundCloud 서버가 요청을 확인할 수 있으므로 다른 사람이 당사를 대신하여 요청할 수 없습니다.

참고 : 웹 사이트에서 사용자 로그 인 기능을 사용하지 않으려면이 단계를 건너 뛸 수 있습니다. 다음 섹션에서 설명됩니다

SoundCloud 앱 페이지를 엽니 다. 여기에서 우리가 이미 만든 모든 앱이 나열됩니다. SoundCloud 계정에 로그인했는지 확인하십시오. 참고 :이 목적을 위해 별도의 계정을 만들 필요가 없습니다. 개인 목적으로 사용하는 것과 동일한 계정을 사용할 수 있습니다.

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Include SDK - Using SoundCloud API<span><span></title</span>></span>
</span>    <span><span><span><script</span> src<span>="//connect.soundcloud.com/sdk.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

를 클릭하여 새 응용 프로그램 버튼을 클릭하십시오.

<span><span><span><script</span> src<span>="sdk.js"</span>></span><span><span></script</span>></span>
</span>

이름을 지정하고 확인란을 확인하여 SoundCloud의 개발자 정책을 수락하십시오.

Big 버튼을 클릭하여 앱 등록을 완료하십시오.

우리가 성공적으로 등록한 후, 우리는 새로 만든 앱의 설정 페이지로 리디렉션됩니다. 그곳에서 우리는 앱의 클라이언트 ID 를 찾을 수 있으며, 이는 요청을 승인하는 데 사용됩니다. 우리는 웹 사이트 및 콜백 필드를 떠날 수 있습니다. 나중에 도달하겠습니다. 클라이언트를 초기화하십시오 "클라이언트 초기화"를 통해 클라이언트가 자체와 SoundCloud API간에 데이터를 교환 할 준비를해야합니다. 우리는 기본 HTML 문서에서 또는 이전에 만들어 져서 외부 .js 파일에서 수행 할 수 있습니다. 그렇게하려는 JavaScript 구문은 다음과 같습니다
분해합시다 :
앱을 등록 할 때 Client_id가 우리에게 제공됩니다.
> Callback_url은 사용자가 로그인 한 후 호출되는 html 파일 인 Callback.html의 URL입니다. 곧 생성 할 것입니다. 이제 초기화 후 SoundCloud API를 쿼리 할 준비가되었습니다. 우리가 이미 할 수있는 일에 대한 몇 가지 예를 살펴 보겠습니다.
예제 브라우저 콘솔을 열고 sc.를 입력하면 SC 객체와 관련된 메소드 목록이 나타납니다. Sc.get (URI, Callback) 중 하나이며 API에 요청을하는 데 사용됩니다. 트랙 목록을 얻는 랜덤 트랙 목록을 얻으려면 다음과 같이 sc.get ()를 사용할 수 있습니다. Codepen에서 SitePoint (@SitePoint)의 펜 목록 트랙을 참조하십시오. 이것이하는 일은 /트랙 엔드 포인트를 쿼리하고 콜백 함수를 기대한다는 것입니다. 응답은 콜백의 응답 매개 변수에 저장되며, 이는 여러 속성을 가진 JavaScript 객체의 배열 인 제목이 그중 하나입니다. 우리는 전체 객체와 그 속성을보기 위해 루핑 대신에 console.log (응답 [0])를 할 수 있습니다. 그러면 우리는 어떤 속성에 액세스 할 수 있는지 알게 될 것입니다.
<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
통지,이 예에서는 초기화 중 콜백 URL을 지정하지 않았습니다. 이것은 우리가 그것을 지정하는지 여부에 관계없이 중요하지 않기 때문입니다. 어느 쪽이든 우리의 코드는 작동합니다. 그러나 사용자-로그 인 기능을 구현할 때는 중요하고 다른 사람이 클라이언트 ID를 사용할 수 없으므로 필요합니다.
. 트랙을 포함시킵니다 SC 객체는 다른 방법 인 Sc.oembed (URL, 옵션, 콜백)를 제공하며, 웹 사이트에 SoundCloud 플레이어를 포함시키고 우리가 선택한 트랙을 재생할 수 있습니다.
.
Codepen에서 Sitepoint (@SitePoint)에 의해 트랙을 포함시키는 펜을 참조하십시오. 분해합시다 :
먼저 우리는 우리가 연주하고 싶은 트랙의 완전한 URL을 제공합니다. 옵션 매개 변수에서 플레이어에 대한 몇 가지 옵션을 설정합니다. 여기에서 더 참조하십시오. 콜백 함수에서, 우리는 페이지의 요소 (#Player)의 내용을 플레이어의 HTML 코드 (res.html)로 바꿉니다.
이 트릭은 웹 사이트에 노래 나 음악을 포함시키는 데 사용될 수 있습니다.
사용자 로그인 구현 사용자 로그 인 기능을 구현하려면 권한 부여 목적으로 콜백 URL이 있어야합니다. 이것은 OAUTH 프로토콜의 요구 사항입니다. 궁금한 점이 있다면 다음은 다음과 같은 간단한 설명이 있습니다. Oauth 2 Simplified. 따라서 콜백 .html의 콜백 URL을 포함하도록 앱 설정을 업데이트하겠습니다. 콜백 페이지를 만듭니다 사용자가 로그인 한 후 팝업 창이이 파일로 리디렉션됩니다. 우리의 경우, 우리는 IT Callback.html의 이름을 지정할 것이며 홈페이지 (index.html)와 동일한 디렉토리에 상주합니다. 이것은 앱 설정의 콜백 필드에서 제공 해야하는 파일입니다.

콜백 파일 내에서 사용해야하는 코드는 문서에 제공됩니다. 그러나 문서는 약간 구식이므로 현대 표준을 충족하도록 약간 수정합니다.
당신은 당신이 원하는만큼 메시지와 디자인을 수정할 수 있지만, 지금은 가능한 한 간단하게 유지할 것입니다 :
.
sc.connect (콜백)는 사용자 로그 인 기능을 구현하는 방법입니다. 팝업 창이 열리고 사용자가 SoundCloud 계정에 로그인하도록 촉구합니다. 기본 사용량은 다음과 같습니다
약간 더 흥미로운 예는 다음과 같습니다
분해합시다 :
사용자가 로그인 한 후에는 Callback.html로 리디렉션됩니다. 그러면 콜백에서 코드를 읽음으로써 추측 할 수 있듯이 팝업 창이 자동으로 닫힙니다. 그 후, 콜백 함수가 호출되며, 여기서 sc.get () 메소드를 사용하여 /me endpoint에 대한 get requestpoint가 만들어집니다. GET 요청이 완료 되 자마자 콜백 기능이 실행되고 환영 메시지가 콘솔에 로그인됩니다.
요청은 현재 로그인 한 사용자에 대한 데이터를 반환합니다. 따라서 사용자가 로그인하기 전에이를 사용하면 오류 메시지가 나타납니다.
사용자의 데이터를 사용하여 일단 사용자가 로그인하면 우리가 할 수있는 훨씬 더 많은 것이 있습니다. 몇 가지 힘을 보여주기 위해 Github에서 데모 웹 사이트를 만들었습니다. 여기서 소스 코드를 찾아서 여기에서 작동하는 것을 볼 수 있습니다.
두 파일을 살펴 보겠습니다. Index.html에서 사용자가 로그인 한 후 사용자 데이터로 채워지면서 4 개의 div가 중요합니다.
<!DOCTYPE html> <html> <head> <title>Include SDK - Using SoundCloud API</title> <script src="//connect.soundcloud.com/sdk.js"></script> </head> <body></body> </html> 
다음으로 가장 중요한 파일은 script.js입니다. 모든 마법은 여기에서 발생합니다. 대부분의 코드는 우리에게 친숙하지만 빨리 걸어 봅시다 :

<script src="sdk.js"></script> 
먼저 우리는 앱을 초기화합니다. 이번에는 redirect_uri가 Callback.html 페이지로 지정되었습니다. 이 URL 또는 URI는 앱 설정에서 지정된 URL과 정확히 일치해야합니다.

그런 다음 #login 버튼에 클릭 이벤트 핸들러를 첨부합니다. 클릭하면 사용자가 로그인하도록 팝업 창이 열리는 Sc.Connect (Callback)를 실행합니다. 사용자가 로그인 한 후 팝업 창이 닫힙니다. 그런 다음 sc.connect ()의 콜백 함수가 실행됩니다. 콜백 함수 내부에서는 현재 로그인 한 사용자의 객체를 반환하는 /ME 엔드 포인트에 대한 GET 요청을 만듭니다. 방금 만든 GET 요청의 콜백에서 우리는 사용자의 퍼머 링크를 변수 user_perma에 저장하여 전역 범위로 정의되어 나중에 사용할 수 있습니다. functions setui (), getTracks () 및 getPlayLists (), UI를 설정하고 사용자의 트랙을 나열하고 사용자의 재생 목록을 각각 나열합니다. 이 함수는 동일한 파일로 정의됩니다.

SC.initialize({ client_id: "CLIENT_ID", redirect_uri: "CALLBACK_URL" }); 

트랙 또는 재생 목록 이름을 클릭하면 재생 () 함수가 실행되며,이 트랙 또는 재생 목록에 대해 Sc.oembed () 메소드를 사용하여 페이지에 오디오 플레이어를 포함합니다.
사용자의 설명을 얻거나 업데이트, 사용자의 아바타를 얻고 사용자가 팔로우하는 사람과 즐겨 찾기를 보는 등 우리가 할 수있는 더 많은 일이 있습니다.
요약
사용자 로그 인 기능을 사용하려면 이전 버전의 SDK를 사용하십시오. 안정적이며 콜백 함수를 사용하여 데이터가 반환됩니다. 사용자 로그 인 기능이 사용되지 않으면 최신 버전의 SDK를 사용할 수 있습니다. 데이터를 반환하기 위해 약속을 사용합니다.
SoundCloud API의 데이터는 간단한 GET 요청으로 액세스 할 수 있습니다. 사용자 별 데이터는 /me endpoint를 사용하여 얻을 수 있지만 사용자가 SoundCloud 계정을 사용하여 웹 사이트에 로그인 한 경우에만.
클라이언트 측에서 API를 쿼리하는 것은 백엔드의 복잡성에서 우리를 절약 할 수있는 강력한 도구입니다. SDK는 우리의 삶을 훨씬 쉽게 만듭니다. 기본 사항을 배운 후에는보다 강력하고 사용자 친화적 인 웹 애플리케이션을 만들 수 있습니다. 가능한 고급 API 메소드에 대한 자세한 내용은 가능한 내용의 몇 가지 예를보고 공식 SoundCloud 문서를 확인하십시오. SoundCloud SDK를 통해 당신이 만든 것 (또는 구축 계획)에 대해 듣고 싶습니다. 의견에 알려주십시오!
JavaScript sdk 와 함께 SoundCloud API 사용에 대한 자주 묻는 질문 (FAQ) JavaScript SDK와 함께 SoundCloud API를 사용하기위한 전제 조건은 무엇입니까? JavaScript SDK와 함께 SoundCloud API를 사용하려면 JavaScript와 API의 기본 이해가 필요합니다. SoundCloud에 SoundCloud 계정과 등록 된 응용 프로그램도 있어야합니다. 등록 된 응용 프로그램은 클라이언트 ID를 제공합니다. 이는 API 요청을하는 데 필요한 클라이언트 ID를 제공합니다.
SoundCloud에 응용 프로그램을 등록하려면 클라이언트 ID를 얻으려면 어떻게합니까?

SoundCloud, SoundCloud 계정에 로그인하고 '앱'섹션으로 이동해야합니다. 여기에서 응용 프로그램 이름, 설명, 웹 사이트 및 URI와 같은 필요한 세부 정보를 제공하여 새 응용 프로그램을 만들 수 있습니다. 응용 프로그램이 생성되면 클라이언트 ID가 제공됩니다.

내 클라이언트 ID로 SoundCloud API를 초기화하려면 SoundCloud API를 초기화하려면 사용해야합니다. sc.initialize 메소드를하고 클라이언트 ID와 함께 객체를 전달하십시오. 예는 다음과 같습니다.
sc.initialize ({ client_id : 'your_client_id' 등록 된 응용 프로그램의 클라이언트 ID로 'your_client_id'를 대체하십시오. >
SoundCloud에 API 요청을하려면 어떻게하나요?
SC.GET 메소드를 사용하여 API 요청을 SoundCloud에 작성할 수 있습니다. 이 메소드는 엔드 포인트와 콜백 함수의 두 매개 변수를 취합니다. 엔드 포인트는 액세스하려는 API 리소스의 URL이며 API 응답이 수신되면 콜백 함수가 실행됩니다.
API 요청을 작성할 때 오류를 처리하는 방법?

언제 API 요청을 작성하면 캐치 메소드를 사용하여 오류를 처리 할 수 있습니다. 이 메소드는 오류가 발생할 때 실행되는 매개 변수로 기능을 취합니다. 오류 객체 가이 함수로 전달되어 오류를 적절하게 처리 할 수 있습니다.

SoundCloud API를 사용하여 트랙을 재생하려면 SoundCloud API를 사용하여 트랙을 재생하려면 어떻게해야합니까? sc.stream 메소드를 사용해야합니다. 이 메소드는 트랙의 URI를 매개 변수로 취하고 스트림 객체를 반환합니다. 그런 다음이 객체의 재생 방법을 사용하여 트랙을 재생할 수 있습니다.

트랙을 일시 중지하고 재개하려면 트랙을 일시 중지하려면 스트림에서 일시 정지 메소드를 사용할 수 있습니다. 물체. 트랙을 재개하려면 재생 메소드를 다시 사용할 수 있습니다.

트랙의 세부 사항을 어떻게 얻을 수 있습니까?

트랙의 세부 사항을 얻으려면 sc.get을 사용할 수 있습니다. 방법을 모색하고 트랙의 URI를 매개 변수로 전달하십시오. API 응답에는 트랙의 세부 사항이 포함됩니다
트랙을 검색하려면 어떻게하나요?

트랙을 검색하려면 SC.GET 메소드를 사용하고 '/트랙'을 엔드 포인트로 전달할 수 있습니다. 쿼리 매개 변수를 전달하여 트랙을 필터링 할 수도 있습니다. 예를 들어, 'My Track'이라는 제목의 트랙을 검색하려면 다음 코드를 사용할 수 있습니다. (Tracks) {
console.log (트랙);
});

사용자의 트랙을 어떻게 얻습니까?

사용자의 트랙을 얻으려면 사용할 수 있습니다. Sc.get 메소드 및 Pass '/user/{user_id}/트랙'을 엔드 포인트로합니다. ‘{user_id}’를 사용자의 ID로 바꾸십시오. API 응답에는 사용자의 트랙이 포함됩니다

위 내용은 JavaScript SDK와 함께 SoundCloud API 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Cocycles의 기능으로 JavaScript 코드 스 니펫을 찾으십시오다음 기사：Cocycles의 기능으로 JavaScript 코드 스 니펫을 찾으십시오