apostrophe-soundcloud

A simple, style-able soundcloud widget for Apostrophe.

You must have a SoundCloud client id in order to use this module. To obtain a client id, log in to SoundCloud and register an "application" on this page. It doesn't take long.

usage

Enable the module and configure your client id in app.js

modules: {
  apostrophe-soundcloud: {
    clientId: 'xxxxxxxxxxxxxxx'
  }
  // ...other modules
}

Now in a template, you can simply call the widget as an aposSingleton

{{ aposSingleton(page, 'sound', 'soundcloud', {}) }}

You can also add it to the controls aray of an aposArea to make it available in the "Add Content" menu

{{ aposArea(page, 'mixed', {
  controls: ['style', 'bold', 'italic', 'slideshow', 'soundcloud']
}) }}

configuration

You can set a multiPlay option that allows multiple soundcloud widgets to play on the page at once. This defaults to false, making sure that when a user clicks "play" on a soundcloud widget, the soundcloud manager will stop the playback of any other soundcloud widgets on the page.

You can also pass a displayOptions object to customize the display of your waveforms

sampleSize the resolution of the waveform. The higher the number, the chunkier it gets.
innerColor the fill color of the waveform before it has been interacted with.
loadedColor the fill color of the part of waveform that has been loaded after play
playedColor the fill color for the part of the waveform that has already been played
scrubberColor the color of the bar that appears when your cursor hovers over a sound that is playing

modules: {
  apostrophe-soundcloud: {
    clientId: 'xxxxxxxxxxxxxxxxxxx',
    multiPlay: false,
    displayOptions: {
      sampleSize: 1,
      innerColor: 'rgba(255, 255, 255)',
      loadedColor: 'rgb(240, 240, 240)',
      playedColor: 'rgb(160, 160, 160)',
      scrubberColor: '#00ff00'
    }
  }
}

Instead of specifying site-wide displayOptions, you can pass them directly into your widget. If you have configured displayOptions in your app.js, setting them in your singleton's options will extend what you have already set in app.js

{{ aposSingleton(page, 'sound', 'soundcloud', {
  displayOptions: {
    // override the loadedColor set in app.js but leave the other colors as-is
    loadedColor: 'rgb(0, 0, 255)'
  }
}) }}