Rythm.js

A javascript library that makes your page dance.

Okazari/Rythm.jsokazari.github.io/Rythm.js/rythm.js

README

Contribute


<♫/> Rythm.js - v2.2.5
======================
Build Status

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

A JavaScript library that makes your page dance.

Getting started
===============

Install with npm:

  1. ```sh
  2. npm install rythm.js
  3. ```

Or get from a CDN:

  1. ```
  2. https://unpkg.com/rythm.js/
  3. https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.5/rythm.min.js
  4. ```

Good old way

Import rythm into your page:

  1. ``` html
  2. <script type="text/javascript" src="/path/to/rythm.min.js"></script>
  3. ```

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

  1. ``` html
  2. <div class="rythm-bass"></div>
  3. ```

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

  1. ``` js
  2. var rythm = new Rythm()
  3. rythm.setMusic('path/to/sample.mp3')
  4. rythm.start()
  5. ```

ES6 module

  1. ``` js
  2. import Rythm from 'rythm.js'
  3. const rythm = new Rythm()
  4. rythm.setMusic('path/to/sample.mp3')
  5. rythm.start()
  6. ```

API documentation
=================

Rythm object

  1. ``` js
  2. const rythm = new Rythm()

  4. /* The starting scale is the minimum scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).
  5. * Value in percentage between 0 and 1
  6. * Default: 0.75
  7. */
  8. rythm.startingScale = value

  10. /* The pulse ratio is be the maximum additional scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).
  11. * Value in percentage between 0 and 1
  12. * Default: 0.30
  13. */
  14. rythm.pulseRatio = value

  16. /* The max value history represent the number of passed value that will be stored to evaluate the current pulse.
  17. * Int value, minimum 1
  18. * Default: 100
  19. */
  20. rythm.maxValueHistory = value

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

  27. /* Used to collaborate with other players library.
  28. * You can connect Rythm to an audioElement, and then control the audio with your other player
  29. */
  30. rythm.connectExternalAudioElement(audioElement)

  32. /* Adjust audio gain
  33. * @value: Number
  34. */
  35. rythm.setGain(value)

  37. /* Add your own rythm-class
  38. * @elementClass: Class that you want to link your rythm to
  39. * @danceType: Use any of the built-in effect or give your own function
  40. * @startValue: The starting frequency of your rythm
  41. * @nbValue: The number of frequency of your rythm
  42. * 1024 Frequencies, your rythm will react to the average of your selected frequencies.
  43. * Examples: bass 0-10 ; medium 150-40 ; high 500-100
  44. */
  45. rythm.addRythm(elementClass, danceType, startValue, nbValue)

  47. /* Plug your computer microphone to rythm.js.
  48. * This function returns a Promise object that is resolved when the microphone is up.
  49. * Require your website to be run in HTTPS
  50. */
  51. rythm.plugMicrophone().then(function(){...})

  53. // Let's dance
  54. rythm.start()

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

Built-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 specific frequencies.
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)

Dance types available

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

  1. ``` js
  2. addRythm('rythm-high', 'shake', 500, 100, { direction:'left', min: 20, max: 300 })
  3. ```

Here are the built-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)
+ borderColor
  + 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]
+ 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]
+ radius
  + min: Minimum value given to border-radius. Default: 0
  + max: Maximum value given to border-radius. Default: 25
  + reverse: Boolean to make effect from max to min. Default: false
+ blur
  + min: Minimum value given to filter: blur(). Default: 0
  + max: Maximum value given to filter: blur(). Default: 8
  + reverse: Boolean to make effect from max to min. Default: false
+ swing
  + curve: Whether the element should curve up or down. Default: down
  + direction: Whether the element should swing right or left. Default: right
  + radius: How far the element will swing. Default: 20
+ kern
  + min: Minimum value given to letter-spacing. Default: 0
  + max: Maximum value given to letter-spacing. Default: 25
  + reverse: Boolean to make effect from max to min. Default: false
+ neon
  + 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]
+ borderWidth
  + min: Minimum value given to border-width. Default: 0
  + max: Maximum value given to border-width. Default: 5
+ fontSize
  + min: Minimum value given to font-width. Default: 0.8
  + max: Maximum value given to font-width. Default: 1.2
+ tilt
  + min: Minimum value given to tilt. Default: 20
  + max: Maximum value given to tilt. Default: 25
  + reverse: Boolean to make effect from max to min. Default: false
+ fontColor
  + 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 need to give an object as the 2nd argument of addRythm instead of a built in dance key.

This object must have two properties:
- dance: The custom function to make elements dance
- reset: The associated custom function that will be called to reset element style

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

  14. /* The reset function signature is
  15. * @elem: The element to reset
  16. */
  17. const resetPulse = elem => {
  18.   elem.style.transform = ''
  19. }

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

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 appreciated. You can start coding on this project following these steps:
+ Fork the project
+ Clone your repository
+ Run npm install
+ Run npm start in the main folder to launch a development web server
+ Enjoy the rythm

Adding new dance type

In v2.2.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
+ This file must export a reset function

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

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

  14. /* The reset function signature is
  15. * @elem: The element to reset
  16. */
  17. export const reset = elem => {
  18.   elem.style.transform = ''
  19. }
  20. ```

+ Import it and register it into the constructor of Dancer.js file:

  1. ``` js
  2. import jump, { reset as resetJump } from './dances/jump.js'
  3. class Dancer {
  4.   constructor() {
  5.     this.registerDance('jump', jump, resetJump)
  6.   }
  7. }
  8. ```

+ Commit it and create a PR. Then look at everyone enjoying your contribution :) !

License: GNU GPL

Author: @OkazariBzh