Styling Soundcite

You can change how Soundcite clips appear in the browser by overriding the CSS rules. The CSS classes which are applied to a Soundcite clip are

• soundcite (from the moment the page loads)
• soundcite-loaded (as soon as the sound has been loaded from SoundCloud or your server and is playable)
• soundcite-play (as soon as the sound has been loaded, until the sound is playing and after it is paused or stops)
• soundcite-pause (while the sound is playing)

You can see the default styles in the player.css file.

Note that to support animating progress as a clip plays, there is a different process for changing the color of the clip. You set it using Javascript, like this:

SOUNDCITE_CONFIG = {
  background_color: '#00FF00'
}

You can use any CSS hex color, but named colors are not supported. The transparency is not changeable through this setting.

If you want to take more control, you can define your own function for updating the playing element. You can see an example in custom-progress.html. Basically, in a <script> tag in your page, define a SOUNDCITE_CONFIG dictionary with a key called update_playing_element. The value of this key should be a javascript function with the signature function(el,percentage){}, where el is the DOM element which represents the playing sound and percentage is a number from 0-100 which represents the percentage of the total clip time which has elapsed.