Rythm.js
v2.2.5 - A lot of new dances !
Demo unter: https://okazari.github.io/rythm.js/
Eine JavaScript -Bibliothek, die Ihren Seiten tanzt.
Installieren Sie mit NPM:
npm install rythm.jsOder von einem CDN bekommen:
https://unpkg.com/rythm.js/
https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.6/rythm.min.js
Importieren Sie Rythm in Ihre Seite:
< script type =" text/javascript " src =" /path/to/rythm.min.js " > </ script >Fügen Sie einen der Rythm CSS -Klassen hinzu, um anzuzeigen, welches Element tanzt:
< div class =" rythm-bass " > </ div >Erstellen Sie ein Rythm -Objekt und geben Sie ihm Ihre Audio -URL an und verwenden Sie die Startfunktion:
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 ) Sie können die addRythm -Funktion verwenden, um Ihre eigenen Klassen bestimmte Frequenzen zu hören. So werden die Grundlagenklassen erstellt:
addRythm('rythm-bass', 'pulse', 0, 10)addRythm('rythm-medium', 'pulse', 150, 40)addRythm('rythm-high', 'pulse', 500, 100) Für mehr Kontrolle über diese Tanztypen können Sie dem addRythm ein Konfigurationsobjekt als letztes Argument angeben:
addRythm ( 'rythm-high' , 'shake' , 500 , 100 , { direction : 'left' , min : 20 , max : 300 } )Hier sind die eingebauten Tänze und ihre Optionen:
transform: scale() . Standard: 0.75transform: scale() . Standard: 1.25transform: translateY() . Standard: 0transform: translateY() . Standard: 30transform: translateX() . Standard: -15transform: translateX() . Standard: 15left für eine rechts nach links, right für eine Bewegung von links nach rechts. Standard: righttransform: rotate() . Standard: -20transform: rotate() . Standard: 20left für eine rechts nach links, right für eine Bewegung von links nach rechts. Standard: rightopacity gegeben. Standard: 0opacity gegeben. Standard: 1false (höher der Puls ist, desto sichtbarer wird es sein)[0,0,0][255,255,255][0,0,0][255,255,255]border-radius . Standard: 0border-radius gegeben wird. Standard: 25falsefilter: blur() . Standard: 0filter: blur() . Standard: 8falseup oder down krümmen sollte. Standard: downright oder left schwingen sollte. Standard: right20letter-spacing gegeben ist. Standard: 0letter-spacing gegeben ist. Standard: 25false[0,0,0][255,255,255]border-width . Standard: 0border-width . Standard: 5font-width . Standard: 0.8font-width . Standard: 1.2tilt . Standard: 20tilt gegeben wird. Standard: 25false[0,0,0][255,255,255]Um jeden visuellen Effekt zu sehen, können Sie zur Demo gehen.
Wenn Sie Ihren eigenen Tanztyp verwenden möchten, müssen Sie ein Objekt als zweites Argument des addRythm anstelle eines eingebauten Tanzschlüssels angeben.
Dieses Objekt muss zwei Eigenschaften haben:
/* 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 )Jede Pull -Anfrage wird geschätzt. Sie können mit der Codierung dieses Projekts beginnen, folgt folgende Schritte:
npm install ausnpm start im Hauptordner aus, um einen Entwicklungs -Webserver zu startenIn v2.2.x ist das Hinzufügen eines neuen Tanztyps ziemlich einfach:
srcdances Beispielsweise finden Sie hier der Inhalt der Datei 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 -Datei: import jump , { reset as resetJump } from './dances/jump.js'
class Dancer {
constructor ( ) {
this . registerDance ( 'jump' , jump , resetJump )
}
}Lizenz: GNU GPL
Autor: @okazaribzh
