Rythm.js
v2.2.5 - A lot of new dances !
ตัวอย่างที่: https://okazari.github.io/rythm.js/
ห้องสมุด JavaScript ที่ทำให้หน้าเว็บของคุณเต้น
ติดตั้งด้วย NPM:
npm install rythm.jsหรือได้รับจาก CDN:
https://unpkg.com/rythm.js/
https://cdnjs.cloudflare.com/ajax/libs/rythm.js/2.2.6/rythm.min.js
นำเข้า Rythm ลงในหน้าของคุณ:
< script type =" text/javascript " src =" /path/to/rythm.min.js " > </ script >เพิ่มหนึ่งในคลาส Rythm CSS เพื่อระบุองค์ประกอบที่จะเต้นรำ:
< div class =" rythm-bass " > </ div >สร้างวัตถุ Rythm และให้ URL เสียงของคุณจากนั้นใช้ฟังก์ชั่นเริ่มต้น:
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 ) คุณสามารถใช้ฟังก์ชั่น addRythm เพื่อทำให้คลาสของคุณฟังความถี่เฉพาะ นี่คือวิธีการสร้างคลาสพื้นฐาน:
addRythm('rythm-bass', 'pulse', 0, 10)addRythm('rythm-medium', 'pulse', 150, 40)addRythm('rythm-high', 'pulse', 500, 100) สำหรับการควบคุมประเภทการเต้นเหล่านี้มากขึ้นคุณสามารถให้วัตถุการกำหนดค่าเป็นอาร์กิวเมนต์สุดท้ายสำหรับ addRythm :
addRythm ( 'rythm-high' , 'shake' , 500 , 100 , { direction : 'left' , min : 20 , max : 300 } )นี่คือการเต้นรำในตัวและตัวเลือกของพวกเขา:
transform: scale() ค่าเริ่มต้น: 0.75transform: scale() ค่าเริ่มต้น: 1.25transform: translateY() ค่าเริ่มต้น: 0transform: translateY() ค่าเริ่มต้น: 30transform: translateX() ค่าเริ่มต้น: -15transform: translateX() ค่าเริ่มต้น: 15left ไปทางขวาไปซ้ายไป right สำหรับการเคลื่อนที่จากซ้ายไปขวา ค่าเริ่มต้น: righttransform: rotate() ค่าเริ่มต้น: -20transform: rotate() ค่าเริ่มต้น: 20left ไปทางขวาไปซ้ายไป right สำหรับการเคลื่อนที่จากซ้ายไปขวา ค่าเริ่มต้น: rightopacity ค่าเริ่มต้น: 0opacity ค่าเริ่มต้น: 1false (สูงกว่าพัลส์คือยิ่งมองเห็นได้มากขึ้นเท่านั้น)[0,0,0][255,255,255][0,0,0][255,255,255]border-radius ค่าเริ่มต้น: 0border-radius ค่าเริ่มต้น: 25falsefilter: blur() ค่าเริ่มต้น: 0filter: blur() ค่าเริ่มต้น: 8falseup หรือ down ค่าเริ่มต้น: downright หรือ left ค่าเริ่มต้น: right20letter-spacing ค่าเริ่มต้น: 0letter-spacing ค่าเริ่มต้น: 25false[0,0,0][255,255,255]border-width ค่าเริ่มต้น: 0border-width ค่าเริ่มต้น: 5font-width ค่าเริ่มต้น: 0.8font-width ค่าเริ่มต้น: 1.2tilt ค่าเริ่มต้น: 20tilt ค่าเริ่มต้น: 25false[0,0,0][255,255,255]หากต้องการดูเอฟเฟกต์ภาพแต่ละครั้งคุณสามารถไปที่การสาธิต
หากคุณต้องการใช้ประเภทการเต้นรำของคุณเองคุณจะต้องให้วัตถุเป็นอาร์กิวเมนต์ที่ 2 ของ 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 } )`
}
/* 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 )คำขอดึงใด ๆ จะได้รับการชื่นชม คุณสามารถเริ่มเขียนโค้ดในโครงการนี้ตามขั้นตอนเหล่านี้:
npm installnpm start ในโฟลเดอร์หลักเพื่อเปิดเว็บเซิร์ฟเวอร์การพัฒนาใน v2.2.x การเพิ่มประเภทการเต้นใหม่นั้นค่อนข้างง่าย:
srcdances ตัวอย่างเช่นนี่คือเนื้อหาของไฟล์ 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 )
}
}ใบอนุญาต: GNU GPL
ผู้แต่ง: @okazaribzh
