# Spotify

The `<OneTap />` component provides Spotify services for Premium & Free subscribers.

## Spotify Premium User

Spotify Premium users can enjoy the Recoup Webplayer with their Spotify account after signing in.

{% tabs %}
{% tab title="NextJS" %}

```typescript
'use client';

import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      clientId="EXAMPLE_CLIENT_ID"
      signInRequired
    >
      <OneTap 
        spotifyDefaultLink="spotify:album:1HOMjYmPvDpCNbb44JnFaa" 
        spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
        spotifyStartIndex={18}
      />
    </SyncstreamProvider>
  );
}
```

{% endtab %}

{% tab title="Create React App" %}

```typescript
import React from 'react';
import { OneTap, SyncstreamProvider } from "@syncstreamai/syncstream";
import "@syncstreamai/syncstream/dist/index.css";

export default function App() {
  return (
    <SyncstreamProvider
      clientId="EXAMPLE_CLIENT_ID"
      signInRequired
    >
      <OneTap 
         spotifyDefaultLink="spotify:album:1HOMjYmPvDpCNbb44JnFaa" 
         spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
         spotifyStartIndex={18}
      />
    </SyncstreamProvider>
  );
}
```

{% endtab %}
{% endtabs %}

\
Please refer to the [Spotify documentation](https://developer.spotify.com/documentation/web-api/reference/start-a-users-playback) to learn more about this.

| Property            | Description                                                                                                                                                                                                                                                                                 |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| spotifyDefaultLink  | <p>Optional. </p><ul><li>Spotify URI of the context to play. Valid contexts are albums, artists & playlists. </li><li>A JSON array of the Spotify track URIs to play. For example: <code>\["spotify:track:4iV5W9uYEdYUVa79Axb7Rh", "spotify:track:1301WleyT98MSxVHPZCA6M"]</code></li></ul> |
| spotifyFreeAudioUrl | Optional. Audio for Spotify `free` users.                                                                                                                                                                                                                                                   |
| spotifyStartIndex   | Optional. Track number to begin with from the selected media in spotifyDefaultLink. Only applicable if spotifyDefaultLink is an album or a playlist.                                                                                                                                        |

## Spotify Free User

We provide a music player for users without a Spotify subscription as well.\
If you have non-premium users, you can pass in a custom audio file to play.

Example:

```typescript
<OneTap 
    contextUri="spotify:artist:0TnOYISbd1XYRBk9myaseg" 
    spotifyFreeAudioUrl={"https://boa-v2.vercel.app/audio/song.mp3"}
/>

```

| Property            | Description                           |
| ------------------- | ------------------------------------- |
| spotifyFreeAudioUrl | <p>Optional. music audio URL.<br></p> |
