애플뮤직 API로 내가 듣는 노래 띄우기

시험기간이라 시작된 뻘짓중 하나.

할만한 뻘짓은 없나 탐색하던도중 친구로부터 애플뮤직 API를 알게되었다.

방금 전 재생했던 음악 정보를 가져올수있다니, 이거 재미있어보인다.

API로 정보 가져오기

애플은 개발자 계정이 있으면 관련된 API를 제공한다.

하지만 애플 개발자 계정을 등록하기위해 99달러(약 13만원)을 지불해야한다. ~~심지어 1년마다 갱신~~

~~등록할 생각은 없지만~~ 가격 구경이라도 할려고 했는데, 맘대로 보여주지도 않는다.

아무튼 API를 통해 정보를 가져올려면 토큰이 필요한데,

이 토큰은 개발자 계정을 등록해야만 발급받을 수 있다.

그러면 어떻게 정보를 가져와야 하는가?

정석대로라면 연간 99달러라는 무친가격을 지불하고 사용하는게 맞는데,

친구가 신박한방법으로 토큰을 ~~얻어서~~ 사용해 볼 수 있었다.

덕분에 얻게 된 API로 정보를 가져와 보면

다양한 정보가 쏟아져내린다.

여기서 내가 필요한 정보를 선택해서 가져오면 되는것이다.

필요한 정보만 가져오기

위에서 불러온 API에서 나온 정보를 용도에 맞게 사용하기 위해선 정보를 가공해야 한다.

나는 웹사이트에 제목, 가수, 앨범커버, 미리듣기, 자세한 정보 보기 기능을 구현하려고 했다.

따라서 이와 관련된 데이터를 추출해 내야 한다.

불러온 값을 다시보면

제목은 name, 가수는 artistName, 앨범커버는 artwork,

미리듣기는 preview, 애플뮤직으로 이어지는 링크는 url에 있는것을 확인할 수 있다.

나는 이 정보를 JSON 형식으로 불러왔기 때문에 배열 방식으로 접근하면 원하는 정보를 추출할 수 있다.

먼저 원하는 정보가 제대로 추출되는지 확인해보자.

fetch를 이용하여 API 정보를 불러온다.

console.log() 를 이용하면 웹페이지의 개발자도구 콘솔에 로그를 남길 수 있다.


fetch("https://simple-proxy.taein.workers.dev/?destination=https://yuntae.in/api/music/recent/noa")
        .then(res => res.json())
          console.log(data.data[0].attributes.artistName);
          console.log(data.data[0].attributes.name);
          console.log(data.data[0].attributes.artwork.url);
          console.log(data.data[0].attributes.previews[0].url);
          console.log(data.data[0].attributes.url);

웹사이트로 들어가서 개발자 도구의 콘솔을 확인해보면, 원하는 정보들만 뜨는것을 확인할 수 있다.

이제 웹사이트로 구현해보자

필요한 정보들을 가져왔으면 이제 내가 원하는 모양으로 웹사이트를 구현하면 된다.

먼저 HTML로 가져오기 위해 각각의 정보를 변수로 선언하였다.


var artistName = data.data[0].attributes.artistName;
var songName = data.data[0].attributes.name;
var albumCover = data.data[0].attributes.artwork.url;
var preview = data.data[0].attributes.previews[0].url;
var moreInfo = data.data[0].attributes.url;

그런 다음 HTML에 ID 형식으로 넘겨받아 출력하였다.

이떄 Album Art는 API에서 보낸 링크에 있는 {w}x{h}값을 지정해줘야

정상적으로 이미지를 불러올 수 있다.

~~안하면 404가 당신을 맞이하게 될껄요?~~

JavaScript에서 구현한 내용은 거의 대부분 정보를 가져오고 가공하는 내용이였다.

디자인

나의 디자인은 심플하면서 필요한 정보만 전달하는 것이 주 목표였다.

결과물은 다음과 같다.

그냥 뭐… 딱히 설명할게 없는 디자인이다.

모바일에서 접속하는 상황을 대응하기 위해 @media (max-width: 768px) 를

이용하여 모바일 화면에 맞는 CSS를 따로 구축하였다.

또한 나는 다크모드를 중요시 여기는 사람이기 때문에

JavaScript에서 기기의 다크/라이트 모드 여부를 불러오는 기능인

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)"); 를 이용하여 기기의 설정에 맞게 화면 테마를 적용하였다.

다 만들었으면 이제 웹사이트를 배포하자

~~열심히 만들어놓고 썩힐순없다.~~

일단 GitHub에 먼저 올린 후 vercel을 이용하여 배포하였다.

GitHub에도 웹페이지를 배포할 수 있는 기능이 있지만, 나는 구매해놓은 도메인을 활용하기 위해 vercel을 이용하였다.

GitHub에 새로운 Repositories를 하나 생성한 뒤, 만들어둔 소스코드들을 push 해준다.

그 후 vercel에 들어가면 GitHub에 올린 Repositories를 선택하여 추가하면

vercel 도메인을 가진 웹사이트를 배포할 수 있다.

나는 https://witch.work/posts/cloudflare-make-subdomain 을 참고하여 내가 구매한 도메인을 연결하였다.

작업이 완료되면, 연결한 도메인 주소 (https://music.noa.kim) 로 들어가면

정상적으로 웹사이트가 배포된 것을 확인할 수 있다.

결론

~~걍 시험기간 뻘짓~~

사실 요즘 학교에서 파이썬만 주로 사용하다 보니, 기존에 익혀둔 웹 프로그래밍을 다 잊어버릴 뻔 했는데, 이 기회에 다시 써봐서 덕분에 공부를 할 수 있었다.

솔직히 이번 코딩은 chatGPT의 도움도 많이 받았는데, chatGPT가 정말 코드를 잘 작성해준다.

~~아~ 개발자 없어지겠네;;~~

그리고 이참에 JavaScript도 더 공부해봐야 할꺼같다.

그리고 시놀로지 소프트웨어를 이용한 헤놀로지 나스를

집에 남아있는 미니PC를 이용하여 구축했는데 ~~시험기간 뻘짓2~~

시간이 되면 이것도 글로 한번 써보겠다.

Now_ListeningyesA0513 • Updated Aug 7, 2024GitHub에서 보기

2025.04.14 추가

API를 사용하기 위해 받아오는 사용자의 정보는

account?meta=subscription… 에 있는 Media-User-Token 이다.

~~자꾸 까먹어서…~~