Styling Soundcite

todrobbins edited this page Dec 2, 2014 · 4 revisions
Clone this wiki locally

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.

We are working on some strategies to allow you to style the "progress bar" using CSS, but right now, you must write a little bit of JavaScript if you want to change the way Soundcite shows how much of a clip has been played. Please note that this is subject to change, because we'd much prefer to use an all CSS solution.

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.