Rythm.js
v2.2.5 - A lot of new dances !
Demostración en: https://okazari.github.io/rythm.js/
Una biblioteca de JavaScript que hace que su página baile.
Instalar con NPM:
npm install rythm.jsO obtener de un CDN:
https://unpkg.com/rythm.js/
https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.6/rythm.min.js
Importar rythm en su página:
< script type =" text/javascript " src =" /path/to/rythm.min.js " > </ script >Agregue una de las clases de Rythm CSS para indicar qué elemento bailará:
< div class =" rythm-bass " > </ div >Cree un objeto Rythm y le dé su URL de audio y luego use la función de inicio:
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 ) Puede usar la función addRythm para que sus propias clases escuchen frecuencias específicas. Así es como se crean las clases básicas:
addRythm('rythm-bass', 'pulse', 0, 10)addRythm('rythm-medium', 'pulse', 150, 40)addRythm('rythm-high', 'pulse', 500, 100) Para obtener un mayor control de los tipos de baile, puede dar un objeto de configuración como último argumento a addRythm :
addRythm ( 'rythm-high' , 'shake' , 500 , 100 , { direction : 'left' , min : 20 , max : 300 } )Aquí están los bailes incorporados y sus opciones:
transform: scale() . Valor predeterminado: 0.75transform: scale() . Valor predeterminado: 1.25transform: translateY() . Valor predeterminado: 0transform: translateY() . Valor predeterminado: 30transform: translateX() . Valor predeterminado: -15transform: translateX() . Valor predeterminado: 15left para un movimiento de derecha a izquierda, right para un movimiento izquierdo a derecho. Valor predeterminado: righttransform: rotate() . Valor predeterminado: -20transform: rotate() . Valor predeterminado: 20left para un movimiento de derecha a izquierda, right para un movimiento izquierdo a derecho. Valor predeterminado: rightopacity . Valor predeterminado: 0opacity . Valor predeterminado: 1false (más alto es el pulso, cuanto más visible será)[0,0,0][255,255,255][0,0,0][255,255,255]border-radius . Valor predeterminado: 0border-radius . Valor predeterminado: 25falsefilter: blur() . Valor predeterminado: 0filter: blur() . Valor predeterminado: 8falseup o down . Valor predeterminado: downright o left . Valor predeterminado: right20letter-spacing . Valor predeterminado: 0letter-spacing . Valor predeterminado: 25false[0,0,0][255,255,255]border-width . Valor predeterminado: 0border-width . Valor predeterminado: 5font-width . Valor predeterminado: 0.8font-width . Valor predeterminado: 1.2tilt . Valor predeterminado: 20tilt . Valor predeterminado: 25false[0,0,0][255,255,255]Para ver cada efecto visual, puede ir a la demostración.
Si desea usar su propio tipo de baile, debe dar un objeto como el segundo argumento de addRythm en lugar de una llave de baile incorporada.
Este objeto debe tener dos propiedades:
/* 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 )Cualquier solicitud de extracción será apreciada. Puede comenzar a codificar en este proyecto después de estos pasos:
npm installnpm start en la carpeta principal para iniciar un servidor web de desarrolloEn v2.2.x agregar un nuevo tipo de baile es bastante fácil:
srcdances Por ejemplo, aquí está el contenido del archivo 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 )
}
}Licencia: GNU GPL
Autor: @okazaribzh
