Make Your Page Elements Dance To The Music – Rythm.js

Rythm.js is a funny JavaScript library that makes any HTML elements dance to the music you define.

Basic usage:

1. Install the Rythm.js package with NPM.

# NPM
$ npm install rythm.js --save

2. Import the Rythm as an ES6 module.

import Rythm from 'rythm.js'

3. Or directly load the rythm.min.js script in the document.

<!-- From Local -->
<script src="/path/to/dist/rythm.min.js"></script>
<!-- From CDN -->
<script src="https://cdn.jsdelivr.net/npm/rythm.js@latest/rythm.min.js"></script>

4. Initialize the rythm.js library.

const rythm = new Rythm();

5. Apply a dance type to your element. All possible dance types:

• pulse
• shake
• jump
• twist
• vanish
• blur
• swing
• kern
• neon
• tilt
• borderColor
• color
• radius
• borderWidth
• fontSize
• fontColor
• Or custom

rythm.addRythm(elementClass, type, startValue, nbValue, options)

6. Or use prebuilt CSS classes:

<div class="rythm rythm-bass">♫</div>
<div class="rythm rythm-medium">♫</div>
<div class="rythm rythm-high">♫</div>

7. Create a custom dance type as you see the predefined types under the dances folder.

// blur.js
export default (elem, value, options = {}) => {
  const max = !isNaN(options.max) ? options.max : 8
  const min = !isNaN(options.min) ? options.min : 0
  let blur = (max - min) * value
  if (options.reverse) {
    blur = max - blur
  } else {
    blur = min + blur
  }
  elem.style.filter = `blur(${blur}px)`
}
export const reset = elem => {
  elem.style.filter = ''
}

8. Start the dance and done.

rythm.start()

9. More API methods.

/* The starting scale is the minimum scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).
 * Value in percentage between 0 and 1
 * Default: 0.75
 */
rythm.startingScale = value
/* The pulse ratio is be the maximum additional scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).
 * Value in percentage between 0 and 1
 * Default: 0.30
 */
rythm.pulseRatio = value
/* The max value history represent the number of passed value that will be stored to evaluate the current pulse.
 * Int value, minimum 1
 * Default: 100
 */
rythm.maxValueHistory = value
/* Used to collaborate with other players library.
 * You can connect Rythm to an audioElement, and then control the audio with your other player
 */
rythm.connectExternalAudioElement(audioElement)
/* Adjust audio gain
 * @value: Number
 */
rythm.setGain(value)
/* Add your own rythm-class
 * @elementClass: Class that you want to link your rythm to
 * @danceType: Use any of the built-in effect or give your own function
 * @startValue: The starting frequency of your rythm
 * @nbValue: The number of frequency of your rythm
 * 1024 Frequencies, your rythm will react to the average of your selected frequencies.
 * Examples: bass 0-10 ; medium 150-40 ; high 500-100
 */
rythm.addRythm(elementClass, danceType, startValue, nbValue)
/* Plug your computer microphone to rythm.js.
 * This function returns a Promise object that is resolved when the microphone is up.
 * Require your website to be run in HTTPS
 */
rythm.plugMicrophone().then(function(){...})
/* Stop the party
 * @freeze: Set this to true if you want to prevent the elements to reset to their initial position
 */
rythm.stop(freeze)