React-native-apple-music-sdk NPM

react-native-apple-music-sdk

MusicKit SDK For React Native.

Features

Apple Music Auth API, with Embed Webview, and get the musicUserToken from developer jwt token of Apple Music.
Apple MusicKit Playback, including play, pause, getDuration, getCurrentPosition, listeners.

Installation

npm install react-native-apple-music-sdk
yarn add react-native-apple-music-sdk

Props

interface AuthResponse {
    isAppleMusicSubscriber: boolean;
    musicUserToken: string;
    cid: string;
    itre: string;
    supported: string;
}
export interface AuthResultSuccess extends AuthResponse {
    success: true;
}
export interface AuthResultFailed {
    success: false;
    msg: string;
}
/**
 * Validate Apple Music Developer Token
 * @param devToken
 * @returns true if valid
 */
declare function validateDevToken(devToken: string): Promise<boolean>;
/**
 * Open Apple Music Auth through embed webview
 * @param appName - App Name
 * @returns
 */
declare function openAuth(appName: string): Promise<AuthResultSuccess | AuthResultFailed>;
export declare const AppleMusicSdk: {
    initToken: (devToken?: string, musicUserToken?: string) => Promise<any>;
    validateDevToken: typeof validateDevToken;
    openAuth: typeof openAuth;
    player: {
        /**
         *
         * @param catalogId - Apple Music Catalog ID: item.attributes.playParams.catalogId
         * @returns
         */
        prepare: (catalogId: string) => Promise<any>;
        /**
         * Play Apple Music
         * @returns
         */
        play: () => Promise<any>;
        /**
         * Pause Apple Music
         */
        pause: () => Promise<any>;
        /**
         *  Get Apple Music Duration
         * @returns
         */
        getDuration: () => Promise<number>;
        /**
         * Get Apple Music Current Position
         * @returns
         */
        getCurrentPosition: () => Promise<number>;
    };
    constants: {
        DEVELOPER_TOKEN: string;
    };
};
export default AppleMusicSdk;
//# sourceMappingURL=index.d.ts.map

Usage

First of all, you need to generate a developer token from Apple Music Developer.

Check the Generating Developer Tokens from apple official guide.

You can use tool like apple-music-jwt-generator to gernerate your developer jwt token.

And then you can use the initToken method to initialize the token.

import { AppleMusicSdk } from 'react-native-apple-music-sdk';

const devToken = 'xxx'

AppleMusicSdk.initToken(devToken)

Then you can use the openAuth method to open the Apple Music Auth page.

const onAuth = async () => {
    const res = await AppleMusicSdk.openAuth('AppleMusicSdkExample');
    console.log('onAuth', res);
    if (res.success) {
      setMusicUserToken(res.musicUserToken);
      AsyncStorage.setItem('musicUserToken', res.musicUserToken);
    } else {
      Toast.show(`Err: ${res.msg}`, Toast.SHORT);
    }
};

Then you will get the musicUserToken, you can use it to query user music date and apple music content through API.

import { AppleMusicSdk } from 'react-native-apple-music-sdk';

const onPrepare = async (item: SongItem, index: number) => {
    const {
      attributes: {
        name,
        playParams: { catalogId },
      },
    } = item;
    console.log('onPrepare', name, catalogId);
    setPlayState(PlayState.BUFFERING);
    setPlayingIndex(index);
    await AppleMusicSdk.initToken(devToken, musicUserToken);
    const res = await AppleMusicSdk.player.prepare(catalogId);
    setPlayState(PlayState.PLAYING);
    console.log('onPlay', res);
};

More example in the example.