Apple Music JavaScript 통합 가이드
20042 단어 applejavascriptwebdev
그러나 이것은 인터넷 개발자에게 무엇을 의미하는가?응, 네가 스포티파이, 애플, 아마존, 혹은 유사한 회사가 아니라면, 너는 미디어 전쟁에서 경쟁할 기회가 상대적으로 낮다.그런데 목표가 다르면?만약 당신이 미디어 플랫폼 자체가 아닌 음악 플레이어, 부가 서비스, 또는 유사한 것을 만들고 싶다면 어떻게 해야 합니까?이런 상황에서 왜'대유저'가 당신을 도와주지 못하게 합니까?
오늘 게시물에서 애플 뮤직과 애플의 뮤직키트 JS를 웹 응용 프로그램에 통합하는 과정을 알려드리고 싶습니다.재밌을 것 같은데?
왜 애플 음악이야?
우리가 시작하기 전에 나는 가능한 문제를 이야기하고 싶다.
Why did I choose Apple Music?
Spotify가 시장의 리더라는 것을 이미 알고 있을 것이다.그것은 후자가 훨씬 작지만 지금까지 가장 큰 사용자층을 보유하고 있다.애플 음악은 두 부문 모두 스포티파이에 뒤진 2nd place에 올랐다.
따라서 사용자 기반 프로그램을 선택한 경우 Spotify를 선택해야 합니다.하지만 몇 가지 더 기억해야 할 것이 있다.이 서비스는 공용 API입니다.
이 방면에서 뮤직키트를 보유한 애플이 선두를 달리고 있는 것은 의심할 여지가 없다.iOS, Android 또는 웹 응용 프로그램에서 Apple Music과 직접 통합할 수 있는 편리한 라이브러리를 제공합니다.
관심 있는 경우 Spotify는 Web Playback SDK을 통해 비슷한 기능을 제공합니다.그럼에도 불구하고, 그것은 아직 테스트 단계에 있으며, 지원이 제한되어 있으며, 비용을 지불하는 사용자에게만 적용되며, 상업 제품에 사용하기 전에 Spotify의 서면 승인이 필요하다.애플의 제품과는 거리가 멀지만, 대부분의 (전부가 아니라면) 다른 미디어 서비스가 이런 선택을 제공하지 않는다는 것을 감안하면, 이것은 여전히 상당히 괜찮다.
준비 작업
MusicKit JS를 사용하기 전에 몇 가지 준비를 해야 합니다.애플뮤직 API 토큰을 우리 스스로 사준다는 것이다.
놀랍게도, 이것은 좀 어려울 수도 있다. 특히 사과의 pretty convoluted documentation은 그렇다.
우선 Apple Developer Program의 멤버가 되어야 합니다.이것은 정성껏 등록하고 연간 100달러의 비용을 지불해야 할 것이다.
완료되면 Apple Developer dashboard로 이동하여 다음 세부 정보를 수집해야 합니다.
지금까지 모든 세부 사항이 있어야만 우리는 방문 서비스에 필요한 JSON 웹 영패 (JWT) 를 최종적으로 생성할 수 있다.
이를 위해 JS를 사용할 것입니다.NodeJS는 jsonwebtoken module이며 코드는 다음과 같습니다.
const fs = require("fs");
const jwt = require("jsonwebtoken");
const privateKeyPath = "./AuthKey_12345ABCDE.p8";
const privateKey = fs.readFileSync(privateKeyPath).toString();
const teamId = "ABCDE12345";
const keyId = "12345ABCDE";
const token = jwt.sign({}, privateKey, {
algorithm: "ES256",
expiresIn: "180d",
issuer: teamId,
header: {
alg: "ES256",
kid: keyId,
},
});
console.log(token);
다른 한편, JWT 토큰을 어떻게 관리하는지는 당신에게 달려 있습니다.우리의 예에서, 시범적인 목적으로, 우리는 단지 하나의 영패만 필요로 한다. 이것이 바로 그것이 유효기간이 180일 (최대치) 로 설정된 이유이다.
통합
좋아, 토큰을 얻으려면 많은 일을 해야 하지만, 여기서부터는 더 쉬워질 뿐이야.우리 마지막으로 인코딩 좀 하자!
장치
먼저 MusicKit JS 라이브러리를 설치해야 합니다.유일한 official way은 애플 CDN에 대한
<script> 레이블을 통해 제공됩니다.<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>
TypeScript 사용자인 경우 타자를 사용하여 라이브러리를 보다 쉽게 탐색할 수 있습니다.때로는 공식 문서보다 낫다!
MusicKit JS의 경우 일부 타자기는 openly available이다.그것들은 완벽하지도 않고 유행이 좀 지났지만 도움이 될 수도 있다.
초기화
라이브러리를 설치한 후에 우리는 지금 그것을 초기화해야 한다.이를 할 수 있는 두 가지 방법이 있다. 바로 'HTML' 과 'JS 방식' 이다.
HTML 모드
첫 번째 예에서, 몇 개의 HTML 태그를 통해 라이브러리에 무엇을 해야 하는지 알려주면 라이브러리에 대해 더 많은 제어를 할 수 있습니다.설정의 경우
<meta>에 <head> 태그를 추가하면 됩니다.<meta name="apple-music-developer-token" content="DEVELOPER-TOKEN">
<meta name="apple-music-app-name" content="MusicKit Web App">
<meta name="apple-music-app-build" content="1.0.0">
id을 통해 Apple Music에 연결할 요소를 표시하기만 하면 라이브러리에서 처리할 수 있습니다.<button id="apple-music-authorize"></button>
<button id="apple-music-unauthorize"></button>
JS로
HTML 설정은 편리하지만, 나는 내가 지금 일어나고 있는 일을 더 잘 제어할 수 있다는 것을 느낄 수 있도록 좀 더 상세한 방식을 좋아한다.이것이 바로 왜냐면 지금부터 JS를 전문적으로 소개하지만 official docs에서 HTML 방식에 대한 더 많은 정보를 찾을 수 있습니다.
먼저
musickitloaded 요소에서 document을 들으면 라이브러리를 언제 사용할 수 있는지 알 수 있습니다.개인적으로 나는'지옥 리셋'의 가능성을 제한하고 더 깨끗한 코드를 실현하기 위해 약속으로 포장하는 것을 좋아한다.const setupMusicKit = new Promise((resolve) => {
document.addEventListener("musickitloaded", () => {
const musicKitInstance = window.MusicKit.configure({
developerToken: "DEVELOPER-TOKEN",
app: {
name: "MusicKit Web App",
build: "1.0.0",
},
});
delete window.MusicKit; // clear global scope
resolve(musicKitInstance);
});
});
configure() 방법을 사용하여 실제 MusicKit 실례를 만들고 설정합니다. 나중에 HTML 설정의 <meta> 표시와 유사합니다.위의 코드에서 나는 약속에 따라 이 문제를 해결했다.더 이상 필요하지 않기 때문에, MusicKit 대상의 전체 범위를 제외하면, 나는 MusicKit 대상의 전체 범위를 갚을 것이다.
사용자에게 권한을 부여하기 위해서 우리는
authorize() 방법을 사용할 수 있습니다. 이 방법은 프로세스가 언제 완성되었는지에 대한 약속을 되돌려줍니다.// ...
setupMusicKit.then(async (musicKit) => {
try {
await musicKit.authorize();
// await musicKit.unauthorize();
} catch(error) {
// Handle cases when authorization fails
}
})
사용법
이 때 문서와 선택할 수 있는 타자는 당신의 지침이어야 합니다.MusicKit JS는 애플 음악 응용 프로그램 자체의 모든 기능인 음악 재생 제어, 애플 음악의 디렉터리 검색, 사용자의 개인 라이브러리 조작 등을 거의 접근할 수 있게 해 줍니다!
그렇긴 하지만 MusicKit JS 가능성의 예를 몇 개 살펴보겠습니다.
재생 사용자의 재생 목록
// ...
// null indicates fetching all the playlists (within pagination limit)
const playlists = await musicKit.api.library.playlists(null);
const randomIndex = Math.floor(Math.random() * playlists.length);
// pick random playlist
const playlistId = playlists[randomIndex].id;
// set playback queue
await musicKit.setQueue({
playlist: playlistId,
});
// start playing (playing audio usually requires user interaction)
await musicKit.play();
// ...
음악 재생 제어
// ...
const play = () => {
return musicKit.play(); // promise
};
const pause = () => {
appleMusic.pause();
};
const next = () => {
return appleMusic.skipToNextItem(); // promise
};
const previous = () => {
appleMusic.skipToPreviousItem(); // promise
};
// ...
skipToPreviousItem())으로 옮겼을 때 뮤직키트 라이브러리에 오류가 있는 것 같다는 점이다.그러면 오류가 발생하고 다음과 같은 메시지가 있는 오류 대화 상자가 표시됩니다.A play stop() method was called without a previous play() descriptor
잘못된 경고를 제외하고는 모든 것이 정상이어야 한다.따라서 라이브러리 오류로 인해 일부 CSS 숨기기 대화 상자를 사용하는 것이 좋습니다.
#musickit-dialog-scrim,
#musickit-dialog {
display: none;
}
애플 음악 목록 검색
// ...
const { songs } = await appleMusic.api.search("Counting Stars", {
limit: 1,
types: "songs",
});
if (songs && songs.data[0]) {
await appleMusic.playNext({ song: resources.songs.data[0].id });
}
// ...
search() 및 기타 조회 방법을 사용할 때 queryParameters이라는 매개 변수를 받아들여야 한다는 것을 알아야 한다.이것은 MusicKit JS 문서와 달리 아래 API 호출에 전달되는 매개변수 객체입니다.마찬가지로 애플의 문서는 매우 복잡하기 때문에 너는 자신의 방법을 찾아야 한다.Apple Music API docs
더 많아...
따라서 MusicKit JS를 어떻게 사용하는지 설명하는 몇 가지 일반적인 예일 뿐입니다.그것은 너로 하여금 애플 음악의 잠재력을 더욱 광범위하게 이해하게 하지만, 우리는 단지 표면에 닿았을 뿐이다.이제 너는 더 많은 것을 탐색하고 자신의 애플 음악 집적을 세울 수 있다!
만약 문제가 있거나 문서에 갇히면 언제든지 아래에 댓글을 남겨 주십시오. 제가 최선을 다해 도와 드리겠습니다.
웹 개발에 대한 더 많은 정보를 알고 싶으면 저에게 연락 주세요. , 또는 Facebook을 직접 보십시오.그리고 나를 살펴봐(돌아오고 있어!)저쪽에서 구독하세요.읽어주시고 잘 들어주셔서 감사합니다...죄송합니다. 인코딩!
Reference
이 문제에 관하여(Apple Music JavaScript 통합 가이드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/areknawo/apple-music-javascript-integration-guide-518b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
