Jump to content
Fi8sVrs

<♫/> Rythm.js - v2.1.1 - A javascript library that makes your page dance.

Recommended Posts

  • Active Members

<♫/> Rythm.js - v2.1.1 -  A javascript library that makes your page dance.

 

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

 

Getting started

Install with npm

npm install rythm.js

CDN:

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

 

Good old way

Import rythm into your page

<script type="text/javascript" src="/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

var rythm = new Rythm();

/* The starting scale is the minimum scale your elements will take (Scale ratio is startingScale + (pulseRatio * currentPulse));
 * Value in percentage between 0-1
 * Default 0.75
 */
rythm.startingScale = value;

/* The pulse ratio is be the maximum additionnal scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse))
 * Value in percentage between 0-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 music's 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 build in effect or give your own function;
 * @startValue: The starting frequence of your rythm.
 * @nbValue: The number of frequences of your rythm.
 * 1024 Frequences, your rythm will react to the average of your selected frequences.
 * 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 return a promise 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
rythm.stop();

 

Build in classes with "pulse" effect

  • rythm-bass
  • rythm-medium
  • rythm-high

 

Custom-classes

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

  • addRythm('rythm-bass','pulse',0,10);
  • addRythm('rythm-medium','pulse',150,40);
  • addRythm('rythm-high','pulse',500,100);

 

 

Available dance types

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 build in dances and their options

  • pulse
    • min : Minimum value given to transform: scale(). Default: 0.75
    • max : Maximum value given to transform: scale(). Default: 1.25
  • jump
    • min : Minimum value given to transform: translateY(). Default: 0
    • max : Maximum value given to transform: translateY(). Default: 30
  • shake
    • min : Minimum value given to transform: translateX(). Default: -15
    • max : Maximum value given to transform: translateX(). Default: 15
    • direction : left for a right to left move, right for a left to right move. Default: right
  • twist
    • min : Minimum value given to transform: rotate(). Default: -20
    • max : Maximum value given to transform: rotate(). Default: 20
    • direction : left for a right to left move, right for a left to right move. Default: right
  • vanish
    • min : Minimum value (between 0 and 1) given to opacity. Default: 0
    • max : Maximum value (between 0 and 1) given to opacity. Default: 1
    • reverse : Boolean to reverse the effect. Default false (Higher the pulse is, the more visible it will be)
  • color
    • from : Array of integer between 0 and 255 corresponding to a RGB color. Default: [0,0,0]
    • to : Array of integer between 0 and 255 corresponding to a RGB color. Default: [255,255,255]

 

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

 

Custom dance type

If you want to use your own dance type, you can give a function as the 2nd argument of addRythm

/* 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})`
}

addRythm('my-css-class', pulse, 150, 40)

 

Features

  • Your HTML can dance by using any of the available dance types
  • You can use custom functions to build you own dance type (and if it looks awesome ! Feel free to make a PR ;) )

 

Contribute

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

  • Fork the project
  • Clone your repository
  • run npm install
  • run npm start in the main folder to launch a development webserver.
  • Enjoy the rythm.

 

Adding new dance type

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

  • Create a new file in src\dances
  • This file must export your custom dance type function

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)`
}
  • Import it and register it into the constructor of Dancer.js file
import jump from './dances/jump.js'
class Dancer {
  constructor() {
    this.registerDance('jump', jump)
  }
}
  • Commit it and create a PR. Then look at everyone enjoying your contribution :) !

 

Licence : GNU GPL

Author: @OkazariBzh

 

Download: Rythm.js-master.zip

or

git clone https://github.com/Okazari/Rythm.js.git

Source: https://github.com/Okazari/Rythm.js

  • Upvote 2
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...