Spotify

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

Spotify Premium User

Spotify Premium users can enjoy the Spotify Web Player with their Spotify account after signing in.

If you are a Premium user, you can access more music through our SDK. 🎉

NextJS

'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>
  );
}

Create React App

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>
  );
}

Please refer to the Spotify documentation to learn more about this.

Property	Description
spotifyDefaultLink	Optional. Spotify URI of the context to play. Valid contexts are albums, artists & playlists. A JSON array of the Spotify track URIs to play. For example: ["spotify:track:4iV5W9uYEdYUVa79Axb7Rh", "spotify:track:1301WleyT98MSxVHPZCA6M"]
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 are non-premium users, you can pass in a custom audio file to play.

Example:

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

Property	Description
spotifyFreeAudioUrl	Optional. music audio URL.

User Experience

1. Once you install the SDK and add <OneTap />, you can see a popup for Spotify Signin.

2. In order to sign in, please click Sign In to Continue button

3. Once signed in successfully, you are redirected to back to the artist's website.

1. Clicking on the web player here text converts the popup into a web player, initiating music playback.

1. Finally, enjoy music by clicking the play button. 🎼 🥳