sanity-plugin-soundcloud-input

This is a Sanity Studio v3 plugin for importing SoundCloud content to your sanity project.

Features

• Connect your SoundCloud Application with your sanity project
• Select one or more tracks from your latest uploads
• Select one or more tracks from a soundcloud URL
• Create a mixed collection from uploads and URLs

Requirements

For using this plugin you need the following:

1. A SoundCloud Account
2. A registered SoundCloud Application. You can register a new one using the support chat bot at help.soundcloud.com.
3. The SoundCloud Application Credentials (Client ID, Client Secret and Website URI)
4. Your SoundCloud UserID. It can be retreiced using the SoundCloud Public API Specification Page. You have to authorize via your Application Credentials with oAuth2_1 (OAuth2, clientCredentials) to get your user_id.

Installation

npm install sanity-plugin-soundcloud-input

Usage

Add it as a plugin in sanity.config.ts (or .js):

import {defineConfig} from 'sanity'
import {soundcloudInput} from 'sanity-plugin-soundcloud-input'

export default defineConfig({
  //...
  plugins: [soundcloudInput({})],
})

Add it to your schemas:

{
  name: 'soundcloud',
  type: 'soundcloud',
  title: 'SoundCloud Content',
  group: 'soundcloud',
},

Set up your API Credentials in the API Settings and you're ready to go.

Data

The Plugin will provide an array:

export interface SoundcloudData {
  _type: 'soundcloud'
  tracks: Track[]
}

of objects:

export interface Track {
  id: number
  created_at: string
  duration: number
  tag_list: string
  streamable: boolean
  purchase_url?: string
  genre: string
  title: string
  description: string
  release_year: number
  release_month: number
  release_day: number
  license: string
  uri: string
  user: {
    id: number
    username: string
    permalink_url: string
  }
  artwork_url?: string
  waveform_url?: string
  stream_url: string
  playback_count: number
  favoritings_count: number
}

You can use stream_url for the SoundCloud Widget API.

If you want to use the track artwork in your frontend, you have to replace the end of the image-link with your desired resolution, for example 200x200 pixels:

  <img :src="`${track.artwork_url.replace('-large', '-t200x200')}`" alt="Artwork"/>

License

MIT © Damian Rosellen

Develop & test

This plugin uses @sanity/plugin-kit with default configuration for build & watch scripts.

See Testing a plugin in Sanity Studio on how to run this plugin with hotreload in the studio.