@feedfm/web-sdk v1.2.0

Introduction

The Feed Web SDK is the official SDK for consuming the Feed API to stream music.

Installation

First, install it in your project.

npm install @feedfm/web-sdk --save

Usage

With a bundler

Procedural-style rendering

Import the sdk singleton and use it to play music.

import { sdk } from '@feedfm/web-sdk';

async beginPlayback() {
  const player = await sdk.connect( 'my-app-token', 'my-app-secret' );

  if ( player === null ) {
    throw new Error( 'Unable to connect.' );
  }

  const { defaultStations } = sdk.state;
  player.playStation( defaultStations[0] );
}

beginPlayback();

State-based rendering

You can also use sdk.observe(listener) to register a callback that will be invoked every time the SDK state changes. With this, you can write state-based rendering logic that pairs well with component frameworks like React.

function useFeed(): SDKState {
  const [ feedState, setFeedState ] = useState<SDKState>( sdk.state );

  useEffect( () => {
    sdk.observe( setFeedState );
    return () => sdk.stopObserving( setFeedState );
  }, [] );

  return feedState;
}

Without a bundler

You can embed our SDK directly into your HTML page.

<script src="//path/to/node_modules/@feedfm/web-sdk/dist/web-entry.js"></script>

This will introduce the FeedFM global, which functions the same as sdk in the sample above.

Playback

The general flow of playback, as shown above, is:

1. Connect with your credentials, using sdk.connect( token, secret, options ). Once connected, the SDK's state will include a player and defaultStations.
2. Begin playback of a station using player.playStation( station ).
3. Use pause(), play(), skip(), and back() on the player to control playback. Use stop() to end a stream.

Many browsers forbid playback prior to users interacting with the page. Attempting this will cause an exception. You can inspect the boolean state.userHasInteracted to determine whether the user has interacted with the page or not.

State

The SDK has a single state object that is updated throughout playback. It updates often, as part of the state includes the current playback position.

You can consume the SDK state in multiple ways:

• sdk.state -- this provides procedural access to the current state of the SDK.
• sdk.observe( (newState) => ... ) -- this allows you to listen to changes to the state.
• sdk.observeChanegs( ( oldState, newState ) => ... ) -- this allows you to listen to changes, but receiving both the old and new state. Helpful when you want to detect changes in value.