(7월 27일 과제)정보통신산업진흥원 AI 웹개발 취업캠프 - 스포티파이 Web API를 사용하여 음악 재생 페이지 제작하기
기존에 제작한 HTML&CSS 페이지
평소에 다양한 장르의 음악을 듣기 때문에 '나만의 음악 재생 페이지를 만들기'를 주제로 정했다.
HTML과 CSS만을 이용해서 구현한 페이지이다.
직관적이고 간결한 디자인을 선호하기 때문에 깔끔하게 페이지를 디자인하였다.
Javascript Web API 적용하기- Spotify Web API 활용하기!
Javascript를 배우면서 어떤 방식으로 API를 적용하면 좋을지 고민해보았다.
최신음악, 인기차트는 매번 달라지기 때문에 어떻게 구현하면 좋을지 찾아보던 도중 Spotify에서 Web API를 제공하는 것을 발견하였다. 제공하는 API 목록들을 살펴보며 내 페이지에 적용할 기능들을 구상해보았다.
구현할 기능과 사용할 Web API
기존 웹페이지 기능을 살리면서 + 스포티파이에서 제공하는 다양한 api를 활용해보기로 했다. 아래 기능들 이외에도 플레이리스트를 직접 만들고 수정하는 기능도 추가해보고 싶지만 일단 기본적인 것들을 먼저 구현해보기로 했다!
1. Search for Item : 앨범, 아티스트, 플레이리스트, 트랙 등을 검색하여 정보 불러오기
2. Get New Releases : 최신 앨범 불러오기
3. Get Available Genre Seeds : 다양한 장르 불러오기
4. Get playlist item: 선택한 장르에 맞는 플레이리스트 불러오기
5. Player : 음악 재생 -> 스포티파이를 구독해야만 구현할 수 있기 때문에 해당 기능을 넣으면 추후 음악추천서비스를 구현하고 배포할 때 애매해질 거 같다는 생각이 든다. 조금 더 생각해보기로..
스포티파이 API인증키 받기
스포티파이에서 Web APi를 사용하려면 Client ID와 Client Secret을 부여받아야한다.
다른 분이 작성한 블로그를 참고하여 ID와 secret까지 받았다.
참고 블로그 : [Spotify 스포티파이] 1. Spotify OPEN API 가입 (tistory.com)
[Spotify 스포티파이] 1. Spotify OPEN API 가입
developer.spotify.com/dashboard/applications My Dashboard | Spotify for Developers Create and manage Spotify Applications to use the Spotify Web API. Obtain credentials to authenticate with Spotify and fetch metadata. developer.spotify.com 위의 링크에
kunduz.tistory.com
권한인증받기
스포티파이에서 제공하는 API를 사용하려면 인증을 받아야 하는데 아직 해결을 못하고 있다..
스포티파이의 git 계정을 아무리 들여다보아도 해결되지 않고 있다.. 주말동안 해결해서 월요일부터는 기능들을 구현해보아야겠다!
GitHub - spotify/web-api-examples: Basic examples to authenticate and fetch data using the Spotify Web API
Basic examples to authenticate and fetch data using the Spotify Web API - GitHub - spotify/web-api-examples: Basic examples to authenticate and fetch data using the Spotify Web API
github.com
