[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10858":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":21,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},10858,"Rythm.js","Okazari\u002FRythm.js","Okazari","A javascript library that makes your page dance.","https:\u002F\u002Fokazari.github.io\u002FRythm.js\u002F",null,"JavaScript",3924,248,64,17,0,29.19,"GNU General Public License v3.0",false,"master",true,[23,24,25,26,27,28,29,30],"audio","dance","javascript","music","page-dancing","pulse","rythm","web","2026-06-12 02:02:27","# Contribute\n\n\n\u003C♫\u002F> Rythm.js - v2.2.6\n======================\n\n[![Build Status](https:\u002F\u002Ftravis-ci.org\u002FOkazari\u002FRythm.js.svg?branch=master)](https:\u002F\u002Ftravis-ci.org\u002FOkazari\u002FRythm.js)\n\nDemo at: [https:\u002F\u002Fokazari.github.io\u002FRythm.js\u002F](https:\u002F\u002Fokazari.github.io\u002FRythm.js\u002F)\n\nA JavaScript library that makes your page dance.\n\n\nGetting started\n===============\n\nInstall with npm:\n\n```sh\nnpm install rythm.js\n```\n\nOr get from a CDN:\n\n```\nhttps:\u002F\u002Funpkg.com\u002Frythm.js\u002F\nhttps:\u002F\u002Fcdnjs.cloudflare.com\u002Fajax\u002Flibs\u002Frythm.js\u002F2.2.6\u002Frythm.min.js\n```\n\nGood old way\n------------\n\nImport rythm into your page:\n\n```html\n\u003Cscript type=\"text\u002Fjavascript\" src=\"\u002Fpath\u002Fto\u002Frythm.min.js\">\u003C\u002Fscript>\n```\n\nAdd one of the rythm css classes to indicate which element will dance:\n\n```html\n\u003Cdiv class=\"rythm-bass\">\u003C\u002Fdiv>\n```\n\nCreate a rythm object and give it your audio URL then use the start function:\n\n```js\nvar rythm = new Rythm()\nrythm.setMusic('path\u002Fto\u002Fsample.mp3')\nrythm.start()\n```\n\nES6 module\n----------\n\n```js\nimport Rythm from 'rythm.js'\nconst rythm = new Rythm()\nrythm.setMusic('path\u002Fto\u002Fsample.mp3')\nrythm.start()\n```\n\n\nAPI documentation\n=================\n\nRythm object\n------------\n\n```js\nconst rythm = new Rythm()\n\n\u002F* The starting scale is the minimum scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).\n * Value in percentage between 0 and 1\n * Default: 0.75\n *\u002F\nrythm.startingScale = value\n\n\u002F* The pulse ratio is be the maximum additional scale your element will take (Scale ratio is startingScale + (pulseRatio * currentPulse)).\n * Value in percentage between 0 and 1\n * Default: 0.30\n *\u002F\nrythm.pulseRatio = value\n\n\u002F* The max value history represent the number of passed value that will be stored to evaluate the current pulse.\n * Int value, minimum 1\n * Default: 100\n *\u002F\nrythm.maxValueHistory = value\n\n\u002F* Set the music the page will dance to\n * @audioUrl: '..\u002Fexample\u002Fmysong.mp3'\n *\u002F\nrythm.setMusic(audioUrl)\n\n\u002F* Used to collaborate with other players library.\n * You can connect Rythm to an audioElement, and then control the audio with your other player\n *\u002F\nrythm.connectExternalAudioElement(audioElement)\n\n\u002F* Adjust audio gain\n * @value: Number\n *\u002F\nrythm.setGain(value)\n\n\u002F* Add your own rythm-class\n * @elementClass: Class that you want to link your rythm to\n * @danceType: Use any of the built-in effect or give your own function\n * @startValue: The starting frequency of your rythm\n * @nbValue: The number of frequency of your rythm\n * 1024 Frequencies, your rythm will react to the average of your selected frequencies.\n * Examples: bass 0-10 ; medium 150-40 ; high 500-100\n *\u002F\nrythm.addRythm(elementClass, danceType, startValue, nbValue)\n\n\u002F* Plug your computer microphone to rythm.js.\n * This function returns a Promise object that is resolved when the microphone is up.\n * Require your website to be run in HTTPS\n *\u002F\nrythm.plugMicrophone().then(function(){...})\n\n\u002F\u002F Let's dance\nrythm.start()\n\n\u002F* Stop the party\n * @freeze: Set this to true if you want to prevent the elements to reset to their initial position\n *\u002F\nrythm.stop(freeze)\n```\n\nBuilt-in classes with \"pulse\" effect\n------------------------------------\n\n+ rythm-bass\n+ rythm-medium\n+ rythm-high\n\nCustom-classes\n--------------\n\nYou can use the `addRythm` function to make your own classes listen to specific frequencies.\nHere is how the basics classes are created:\n+ `addRythm('rythm-bass', 'pulse', 0, 10)`\n+ `addRythm('rythm-medium', 'pulse', 150, 40)`\n+ `addRythm('rythm-high', 'pulse', 500, 100)`\n\nDance types available\n---------------------\n\nFor more control of theses dance types, you can give a configuration object as last argument to `addRythm`:\n\n```js\naddRythm('rythm-high', 'shake', 500, 100, { direction:'left', min: 20, max: 300 })\n```\n\nHere are the built-in dances and their options:\n+ pulse\n  + min: Minimum value given to `transform: scale()`. Default: `0.75`\n  + max: Maximum value given to `transform: scale()`. Default: `1.25`\n+ jump\n  + min: Minimum value given to `transform: translateY()`. Default: `0`\n  + max: Maximum value given to `transform: translateY()`. Default: `30`\n+ shake\n  + min: Minimum value given to `transform: translateX()`. Default: `-15`\n  + max: Maximum value given to `transform: translateX()`. Default: `15`\n  + direction: `left` for a right to left move, `right` for a left to right move. Default: `right`\n+ twist\n  + min: Minimum value given to `transform: rotate()`. Default: `-20`\n  + max: Maximum value given to `transform: rotate()`. Default: `20`\n  + direction: `left` for a right to left move, `right` for a left to right move. Default: `right`\n+ vanish\n  + min: Minimum value (between 0 and 1) given to `opacity`. Default: `0`\n  + max: Maximum value (between 0 and 1) given to `opacity`. Default: `1`\n  + reverse: Boolean to reverse the effect. Default: `false` (Higher the pulse is, the more visible it will be)\n+ borderColor\n  + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`\n  + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`\n+ color\n  + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`\n  + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`\n+ radius\n  + min: Minimum value given to `border-radius`. Default: `0`\n  + max: Maximum value given to `border-radius`. Default: `25`\n  + reverse: Boolean to make effect from max to min. Default: `false`\n+ blur\n  + min: Minimum value given to `filter: blur()`. Default: `0`\n  + max: Maximum value given to `filter: blur()`. Default: `8`\n  + reverse: Boolean to make effect from max to min. Default: `false`\n+ swing\n  + curve: Whether the element should curve `up` or `down`. Default: `down`\n  + direction: Whether the element should swing `right` or `left`. Default: `right`\n  + radius: How far the element will swing. Default: `20`\n+ kern\n  + min: Minimum value given to `letter-spacing`. Default: `0`\n  + max: Maximum value given to `letter-spacing`. Default: `25`\n  + reverse: Boolean to make effect from max to min. Default: `false`\n+ neon\n  + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`\n  + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`\n+ borderWidth\n  + min: Minimum value given to `border-width`. Default: `0`\n  + max: Maximum value given to `border-width`. Default: `5`\n+ fontSize\n  + min: Minimum value given to `font-width`. Default: `0.8`\n  + max: Maximum value given to `font-width`. Default: `1.2`\n+ tilt\n  + min: Minimum value given to `tilt`. Default: `20`\n  + max: Maximum value given to `tilt`. Default: `25`\n  + reverse: Boolean to make effect from max to min. Default: `false`\n+ fontColor\n  + from: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`\n  + to: Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`\n\nTo see each visual effect, you can go to the [Demo](https:\u002F\u002Fokazari.github.io\u002FRythm.js\u002F).\n\nCustom dance type\n-----------------\n\nIf 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.\n\nThis object must have two properties:\n - dance: The custom function to make elements dance\n - reset: The associated custom function that will be called to reset element style\n\n```js\n\u002F* The custom function signature is\n * @elem: The HTML element target you want to apply your effect to\n * @value: The current pulse ratio (percentage between 0 and 1)\n * @options: The option object user can give as last argument of addRythm function\n *\u002F\nconst pulse = (elem, value, options = {}) => {\n  const max = options.max || 1.25\n  const min = options.min || 0.75\n  const scale = (max - min) * value\n  elem.style.transform = `scale(${min + scale})`\n}\n\n\u002F* The reset function signature is\n * @elem: The element to reset\n *\u002F\nconst resetPulse = elem => {\n  elem.style.transform = ''\n}\n\naddRythm('my-css-class', { dance: pulse, reset: resetPulse }, 150, 40)\n```\n\n\nFeatures\n========\n\n + Your HTML can dance by using any of the available dance types.\n + You can use custom functions to build you own dance type (and if it looks awesome! Feel free to make a PR ;) )\n\n\nContribute\n==========\n\nAny pull request will be appreciated. You can start coding on this project following these steps:\n + Fork the project\n + Clone your repository\n + Run ```npm install```\n + Run ```npm start``` in the main folder to launch a development web server\n + Enjoy the rythm\n\nAdding new dance type\n---------------------\n\nIn v2.2.x adding a new dance type is pretty easy:\n+ Create a new file in `src\\dances`\n+ This file must export your custom dance type function\n+ This file must export a reset function\n\nFor example, here is the content of `jump.js` file:\n\n```js\n\u002F* The function signature is\n * @elem: The HTML element target you want to apply your effect to\n * @value: The current pulse ratio (percentage between 0 and 1)\n * @options: The option object user can give as last argument of addRythm function\n *\u002F\nexport default (elem, value, options = {}) => {\n  const max = options.max || 30\n  const min = options.min || 0\n  const jump = (max - min) * value\n  elem.style.transform = `translateY(${-jump}px)`\n}\n\n\u002F* The reset function signature is\n * @elem: The element to reset\n *\u002F\nexport const reset = elem => {\n  elem.style.transform = ''\n}\n```\n\n+ Import it and register it into the constructor of `Dancer.js` file:\n\n```js\nimport jump, { reset as resetJump } from '.\u002Fdances\u002Fjump.js'\nclass Dancer {\n  constructor() {\n    this.registerDance('jump', jump, resetJump)\n  }\n}\n```\n\n+ Commit it and create a PR. Then look at everyone enjoying your contribution :) !\n\nLicense: GNU GPL\n\nAuthor: [@OkazariBzh](https:\u002F\u002Ftwitter.com\u002FOkazariBzh)\n","Rythm.js 是一个能让网页随音乐节奏舞动的JavaScript库。它通过分析音频文件中的频率变化，使指定的HTML元素根据音乐节奏产生动态效果，如脉冲、跳动等。用户可以通过简单的API设置音乐源、调整音量增益、自定义舞蹈类型及频率范围，并且支持与外部音频播放器集成或直接使用麦克风作为输入源。适用于需要增强用户体验和互动性的音乐网站、在线活动页面或任何希望通过视觉效果来响应音频内容的场景。",2,"2026-06-11 03:30:32","top_topic"]