[Flutter] Spotify 라이브러리

Spotify

스포티파이는 수많은 곡을 광고 없이 감상할 수 있는 디지털 음악 서비스 플랫폼이다.

Spotify Premium - Spotify (KR)

 

이번 포스팅에서는 스포티파이에서 제공하는 것들중, 플러터 앱 개발에 유용할만한

Spotify 라이브러리와 Spotify SDK 라이브러리에 대해 알아보고자 한다.

 

Spotify for Developer

스포티파이 관련 api나 라이브러리를 이용하기 위해서는 스포티파이 개발자 페이지에서 Clinet ID 를 받아와야 한다.

계정을 만드는 방법이라던가, 앱을 등록하는것은 여기서는 생략하도록 하겠다.

spotify-for-developers

 

아래와 같이 Clinet ID가 발급되면 정상적으로 진행된거라고 할 수 있다!

 

 

Spotify 라이브러리

spotify | Dart package

 

Spotify 라이브러리는 Spotify Web Api 를 다트(플러터) 프로젝트에서 보다 쉽게 사용하기 위한 라이브러리라고 할 수 있다.

즉, 스포티파이에 등록된 음악 데이터에 대한 접근을 할 때 필요한 라이브러리이다.

 

주의할점은, 해당 라이브러리에서는, 아니 애초에 Spotify Web Api 에서는

음악재생과 같은 스트리밍기능과 가사를 제공해 주지 않는다는 점은 알아두자!

 

사용법

• 라이브러리 설치

우선, 스포티파이 라이브러리를 설치해준다.

// Terminal
flutter pub add spotify

 

• 사용하기

해당 라이브러리를 사용하기 위해서는 ClientId 와 ClinetSecret 키가 필요하다.

해당 정보를 입력해 주면, 스포티파이 라이브러리가 제공하는 기능을 사용할 수 있다.

// 사용법
final credentials = SpotifyApiCredentials(clientId, clientSecret);
final spotify = SpotifyApi(credentials);

// 스포티파이가 제공하는 기능들
spotify.search
spotify.playlists
sptify.albums

...

 

여기서는 이중 곡명 검색기능을 사용하는 예제만 소개한다.

다른 기능들은 라이브러리의 예제를 찾아보기 바란다..

// 곡명 검색 (List<Page<dynamic>> 으로 반환됨)
final searchResult = await spotify.search.get('apart').first();


// 각 searchResult의 순서
// 0 : Playlist (apart 라는 이름을 가진 플레이리스트 검색)
// 1 : Album (apart 라는 앨범 검색)
// 2 : Artist (apart 라는 아티스트 검색)
// 3 : Track (apart 라는 곡 검색)
final data = searchResult[3];
for (var item in data.items!) {
  if (item is PlaylistSimple) {
    print(
      'Playlist: \n'
      'id: ${item.id}\n'
      'name: ${item.name}:\n'
      'collaborative: ${item.collaborative}\n'
      'href: ${item.href}\n'
      'trackslink: ${item.tracksLink!.href}\n'
      'owner: ${item.owner}\n'
      'public: ${item.owner}\n'
      'snapshotId: ${item.snapshotId}\n'
      'type: ${item.type}\n'
      'uri: ${item.uri}\n'
      'images: ${item.images!.length}\n'
      '-------------------------------'
    );
  }
  if (item is Artist) {
    print(
      'Artist: \n'
      'id: ${item.id}\n'
      'name: ${item.name}\n'
      'href: ${item.href}\n'
      'type: ${item.type}\n'
      'uri: ${item.uri}\n'
      'popularity: ${item.popularity}\n'
      '-------------------------------'
    );
  }
  if (item is Track) {
    print(
      'Track:\n'
      'id: ${item.id}\n'
      'name: ${item.name}\n'
      'href: ${item.href}\n'
      'type: ${item.type}\n'
      'uri: ${item.uri}\n'
      'isPlayable: ${item.isPlayable}\n'
      'artists: ${item.artists!.length}\n'
      'availableMarkets: ${item.availableMarkets!.length}\n'
      'discNumber: ${item.discNumber}\n'
      'trackNumber: ${item.trackNumber}\n'
      'explicit: ${item.explicit}\n'
      'popularity: ${item.popularity}\n'
      '-------------------------------'
    );
  }
  if (item is AlbumSimple) {
    print(
      'Album:\n'
      'id: ${item.id}\n'
      'name: ${item.name}\n'
      'href: ${item.href}\n'
      'type: ${item.type}\n'
      'uri: ${item.uri}\n'
      'albumType: ${item.albumType}\n'
      'artists: ${item.artists!.length}\n'
      'availableMarkets: ${item.availableMarkets!.length}\n'
      'images: ${item.images!.length}\n'
      'releaseDate: ${item.releaseDate}\n'
      'releaseDatePrecision: ${item.releaseDatePrecision}\n'
      '-------------------------------'
    );
  }
}

 

 

 

Spotify SDK 라이브러리

spotify_sdk | Flutter package

 

Spotify sdk 라이브러리는 Spotify Web Playback SDK 의 모바일(플러터) 버전이라고 할 수 있다.

해당 라이브러리는, 스포티파이의 계정을 가져와 해당 유저의 플레이리스트를 가져온다던지, 음악을 스트리밍 한다던지 등의 기능을 제공한다. 음악 스트리밍 기능을 찾는 거라면, 해당 라이브러리를 사용해야 한다.

 

이때 주의해야 할 것이 두가지 있는데,

하나는 음악 스트리밍 기능은 실제로 사용하는 유저가 스포티파이 프리미엄을 사용하고 있어야 한다는 것과,

다른 하나는 해당 라이브러리를 사용하기 위해서는, 기기에 스포티파이 앱이 설치되어 있어야 한다는 점이다.

 

사용법 ( 안드로이드 )

• Auto Setting

라이브러리를 사용하기 위한 기본 환경설정을 해주는 명령어이다.

// Terminal
dart run spotify_sdk:android_setup

 

 

하지만 'Android Studio 4.2+' 를 사용하는 사람들은 수동 Setting을 해야 한다고 되어 있다.

아래는 수동 세팅에 관한 내용이다.

 

• 라이브러리 설치

우선 spotify_sdk 라이브러리를 사용하기 위해 설치를 진행한다.

// Terminal
flutter pub add spotify_sdk

 

• aar 파일 다운로드

해당 링크에서 가장 최신 버전의 aar 파일을 다운로드 받는다.

필자는 현재 기준으로 가장 최신버전인 spotify-app-remote-release-0.8.0.aar 을 다운로드 받았다.

Releases · spotify/android-sdk

 

이후 Android 파일에 

spotify-app-remote 라는 파일을 생성하고,

aar 파일과, build.gradle 파일을 생성 및 위치시킨다.

여기서 build.gradle은 새로 만들어지는 파일이다.

 

이후, build.gradle 파일에 다음과 같이 입력한다.

// android/app/build.gradle

configurations.maybeCreate("default")
artifacts.add("default", file('spotify-app-remote-release-0.8.0.aar'))

 

• Setting.gradle 수정

android 폴더의 setting.gradle 파일에 다음 코드를 추가한다.

include ':spotify-app-remote'

 

• app/build.gradle 파일 수정

android/app/build.gradle 파일에 다음 코드를 추가한다.

defaultConfig {
    manifestPlaceholders = [redirectSchemeName: "spotify-sdk", redirectHostName: "auth"]
    ...
}

 

위의 절차를 마치면, spotify_sdk 를 사용하기 위한 최소 조건은 만족한 것이라고 할 수 있다.

 

 

• 기능 사용

자, 이제 spotify_sdk에서 사용할 수 있는 기능중 하나인 AccessToken을 받아오는 것을 해보려고 한다.

다른 기능들은 spotify_sdk의 예제 프로젝트를 살펴보기 바란다. 프로젝트를 실행해 보는게 훨씬더 이해하기 편했다..

GitHub - brim-borium/spotify_sdk: Flutter Package to connect the spotify sdk

 

아래 이미지는 스포티파이에서 유저의 AccessToken을 받아오는 과정이다.

완벽히 이해할 필요는 없다.

 

access_token을 얻기 위해서 두 번의 요청이 필요하다고 한다.
유저가 로그인을 하면 바로 토큰을 주는 게 아니라 토큰을 얻을 수 있는 code를 리턴한다.

이 code를 가지고 스포티파이 측에 한 번 더 요청을 해야 토큰을 받을 수 있다.

 

다 필요없고, 해당 로직을 수행하는 코드는 다음과 같다.

final accessToken = await SpotifySdk.getAccessToken(
  clientId: ClientId,
  redirectUrl: 'spotify-sdk://auth',
  scope: "app-remote-control,user-modify-playback-state,playlist-read-private",
);

 

이때, 스포티파이 개발자 페이지에 Redirect URls 를 먼저 입력해주자.

여기서 redirectUrl 에 대해 알아야 하는데,

getAccessToken 요청을 보내면, 웹이 열리고, 해당 웹에서 스포티파이 로그인이 진행된다.

로그인이 정상적으로 처리되면, 해당 redirectUrl 에다가 code와 함께 반환하게 되게 된다.

이때, 이 코드를 받고 다시 서버에게 유저 AccessToken를 요청하게 되면, 그제서야 Token을 가져오는 방식인것이다.

(사실 이렇게 이해한게 완전히 맞는지는 모르겠다)

 

아무튼 위의 방식을 이용하여 AccessToken를 가져올 수 있게 된다.

 

 

 

## 엑세스토큰 요청을 했을때 웹페이지가 켜진후 꺼지지 않는 현상

android/app/src/main/AndroidManifest.xml 에서 android:taskAffinity 값을 제거해 주면 된다.

밑의 사진의 코드에서 android:taskAffinity 를 제거하면 정상적으로 처리된다.