search

Okazari / Rythm.js

A javascript library that makes your page dance.
https://okazari.github.io/Rythm.js/
GNU General Public License v3.0
3.93k stars 250 forks source link
audio dance javascript music page-dancing pulse rythm web

readme

Contribute

<♫/> Rythm.js - v2.2.6

Build Status

Demo at: https://okazari.github.io/Rythm.js/

A JavaScript library that makes your page dance.

Getting started

Install with npm:

npm install rythm.js

Or get from a CDN:

https://unpkg.com/rythm.js/
https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.6/rythm.min.js

Good old way

Import rythm into your page:

<script type="text/javascript" src="https://github.com/Okazari/Rythm.js/raw/master/path/to/rythm.min.js"></script>

Add one of the rythm css classes to indicate which element will dance:

<div class="rythm-bass"></div>

Create a rythm object and give it your audio URL then use the start function:

var rythm = new Rythm()
rythm.setMusic('path/to/sample.mp3')
rythm.start()

ES6 module

import Rythm from 'rythm.js'
const rythm = new Rythm()
rythm.setMusic('path/to/sample.mp3')
rythm.start()

API documentation

Rythm object

const rythm = new Rythm()

/* 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

/* Set the music the page will dance to
 * @audioUrl: '../example/mysong.mp3'
 */
rythm.setMusic(audioUrl)

/* 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(){...})

// Let's dance
rythm.start()

/* Stop the party
 * @freeze: Set this to true if you want to prevent the elements to reset to their initial position
 */
rythm.stop(freeze)

Built-in classes with "pulse" effect

Custom-classes

You can use the addRythm function to make your own classes listen to specific frequencies. Here is how the basics classes are created:

Dance types available

For more control of theses dance types, you can give a configuration object as last argument to addRythm:

addRythm('rythm-high', 'shake', 500, 100, { direction:'left', min: 20, max: 300 })

Here are the built-in dances and their options:

To see each visual effect, you can go to the Demo.

Custom dance type

If you want to use your own dance type, you need to give an object as the 2nd argument of addRythm instead of a built in dance key.

This object must have two properties:

/* The custom function signature is
 * @elem: The HTML element target you want to apply your effect to
 * @value: The current pulse ratio (percentage between 0 and 1)
 * @options: The option object user can give as last argument of addRythm function
 */
const pulse = (elem, value, options = {}) => {
  const max = options.max || 1.25
  const min = options.min || 0.75
  const scale = (max - min) * value
  elem.style.transform = `scale(${min + scale})`
}

/* The reset function signature is
 * @elem: The element to reset
 */
const resetPulse = elem => {
  elem.style.transform = ''
}

addRythm('my-css-class', { dance: pulse, reset: resetPulse }, 150, 40)

Features

Contribute

Any pull request will be appreciated. You can start coding on this project following these steps:

Adding new dance type

In v2.2.x adding a new dance type is pretty easy:

For example, here is the content of jump.js file:

/* The function signature is
 * @elem: The HTML element target you want to apply your effect to
 * @value: The current pulse ratio (percentage between 0 and 1)
 * @options: The option object user can give as last argument of addRythm function
 */
export default (elem, value, options = {}) => {
  const max = options.max || 30
  const min = options.min || 0
  const jump = (max - min) * value
  elem.style.transform = `translateY(${-jump}px)`
}

/* The reset function signature is
 * @elem: The element to reset
 */
export const reset = elem => {
  elem.style.transform = ''
}
import jump, { reset as resetJump } from './dances/jump.js'
class Dancer {
  constructor() {
    this.registerDance('jump', jump, resetJump)
  }
}

License: GNU GPL

Author: @OkazariBzh