iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
1
Modern Web

JavaScript 音樂漫遊 - 30 天探索 Web Audio!系列 第 29

28 Rythm.js

最後一個套件,來個歡樂、輕鬆、簡單又有點ㄎㄧㄤ的套件吧 XD

這是什麼?

Rythm.js 是個可以讓網頁依據指定音檔的高低起伏,隨之舞動的套件,透過特定的 css class 名稱,以及簡單的 Javascript 設定,就可以讓畫面上的各個元素變化,非常好玩 XD

Rythm.js

對沒錯,這就是 他們的文件 XDDD

為什麼要玩這個?

透過簡單的設定,就可以畫面跟著董茲董茲,你不覺得很酷嗎~
好啦其實只是因為很ㄎㄧㄤ很好笑 XDDD

功能有哪些?

Rythm.js 提供了數種包裝好的動態效果,使用上可以直接透過 class 綁定至元素上,或是由 Javascript 綁定;另外創作者也可以自行定義動態效果,並給予 class 名稱,使用上方便又富有彈性!

Neon

怎麼用啊?

首先當然是安裝套件:

yarn add rythm.js

or

npm i rythm.js

接著在欲使用的頁面引用,並宣告它:

import Rythm from 'rythm.js'

const rythm = new Rythm()
rythm.setMusic('path/to/sample.mp3')
rythm.start()

當然,記得幫想要跳動的 DOM 元素綁上 class name:

<div class="rythm-bass"></div>
<div class="rythm-medium"></div>
<div class="rythm-high"></div>

分別對應到低、中、高三種頻段。

這樣就完成最基本的設定啦~

如果想要更多的動態效果,也可以透過 Javascript 分別設定:

/* Add your own rythm-class
 * @elementClass: Class that you want to link your rythm to
 * @danceType: Use any of the build 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)

摘自 Github 的 API 說明

danceType 可以參照前述的 文件

這樣就能使用自行定義的效果囉~

以上就是今天的 Rythm.js 介紹啦~

筆者

Gary

半路出家網站工程師;半生熟的前端加上一點點的後端。
喜歡音樂,喜歡學習、分享,也喜歡當個遊戲宅。

相信一切安排都是最好的路。


上一篇
27. Wavesurfer.js
下一篇
29. Javascript 套件選集 - 總整理
系列文
JavaScript 音樂漫遊 - 30 天探索 Web Audio!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言