Rythm.js
v2.2.5 - A lot of new dances !
Demo à: https://okazari.github.io/rythm.js/
Une bibliothèque JavaScript qui fait danser votre page.
Installer avec NPM:
npm install rythm.jsOu obtenez un CDN:
https://unpkg.com/rythm.js/
https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.6/rythm.min.js
Importez un rythme dans votre page:
< script type =" text/javascript " src =" /path/to/rythm.min.js " > </ script >Ajoutez l'une des classes CSS du rythme pour indiquer quel élément dansera:
< div class =" rythm-bass " > </ div >Créez un objet Rythm et donnez-lui votre URL audio, puis utilisez la fonction de démarrage:
var rythm = new Rythm ( )
rythm . setMusic ( 'path/to/sample.mp3' )
rythm . start ( ) import Rythm from 'rythm.js'
const rythm = new Rythm ( )
rythm . setMusic ( 'path/to/sample.mp3' )
rythm . start ( ) 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 ) Vous pouvez utiliser la fonction addRythm pour faire en sorte que vos propres classes écoutent des fréquences spécifiques. Voici comment les cours de base sont créés:
addRythm('rythm-bass', 'pulse', 0, 10)addRythm('rythm-medium', 'pulse', 150, 40)addRythm('rythm-high', 'pulse', 500, 100) Pour plus de contrôle des types de danse, vous pouvez donner un objet de configuration comme dernier argument pour addRythm :
addRythm ( 'rythm-high' , 'shake' , 500 , 100 , { direction : 'left' , min : 20 , max : 300 } )Voici les danses intégrées et leurs options:
transform: scale() . Par défaut: 0.75transform: scale() . Par défaut: 1.25transform: translateY() . Par défaut: 0transform: translateY() . Par défaut: 30transform: translateX() . Par défaut: -15transform: translateX() . Par défaut: 15left pour un mouvement de droite à gauche, right pour un mouvement gauche à droit. Par défaut: righttransform: rotate() . Par défaut: -20transform: rotate() . Par défaut: 20left pour un mouvement de droite à gauche, right pour un mouvement gauche à droit. Par défaut: rightopacity . Par défaut: 0opacity . Par défaut: 1false (le pouls est élevé, plus il sera visible)[0,0,0][255,255,255][0,0,0][255,255,255]border-radius . Par défaut: 0border-radius . Par défaut: 25falsefilter: blur() . Par défaut: 0filter: blur() . Par défaut: 8falseup ou down . Par défaut: downright ou left . Par défaut: right20letter-spacing . Par défaut: 0letter-spacing . Par défaut: 25false[0,0,0][255,255,255]border-width . Par défaut: 0border-width . Par défaut: 5font-width . Par défaut: 0.8font-width . Par défaut: 1.2tilt . Par défaut: 20tilt . Par défaut: 25false[0,0,0][255,255,255]Pour voir chaque effet visuel, vous pouvez aller à la démo.
Si vous voulez utiliser votre propre type de danse, vous devez donner un objet comme 2ème argument d'addition de addRythm au lieu d'une clé de danse intégrée.
Cet objet doit avoir deux propriétés:
/* 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 )Toute demande de traction sera appréciée. Vous pouvez commencer à coder sur ce projet en suivant ces étapes:
npm installnpm start dans le dossier principal pour lancer un serveur Web de développementEn v2.2.x, l'ajout d'un nouveau type de danse est assez facile:
srcdances Par exemple, voici le contenu du fichier jump.js :
/* 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 = ''
}Dancer.js : import jump , { reset as resetJump } from './dances/jump.js'
class Dancer {
constructor ( ) {
this . registerDance ( 'jump' , jump , resetJump )
}
}Licence: GNU GPL
Auteur: @okazaribzh
