pc-pcm-wave 一個簡單錄音波紋 Preact 組件

語言: CN / TW / HK

pc-pcm-wave

一個簡單的 pcm 波紋效果, 適用於 preact 項目, hooks 編寫, 有如下特性

  1. 可自定義狀態數量
  2. 可自定義線的數量、粗細、顏色、波速、振幅、延遲等參數

Live Demo

Link

Props

參數 類型 默認值 描述
stateMap StateMap 默認參數
className string 根元素className
transitionDuration number 500 狀態變換時長

Props Type: StateMap

鍵名 鍵值 描述
[string] State 狀態配置

Props Type: State

鍵名 鍵值 描述
a number 振幅
ws number 波速
p number 頻率
width number 線寬度
color string 線顏色
delay number 延遲單位秒

VM Public Methods

方法 參數 描述
setState stateName(string) 切換到stateMap的鍵值所對應的配置

Demo Code

const line1Def = {
  p: 0.7,
  width: 1.3,
  color: 'rgba(255,255,255,1)',
  delay: 0,
}

const line2Def = {
  p: 0.7,
  width: 1,
  color: 'rgba(255,255,255,0.5)',
  delay: 0.45,
}

const stateMap = {
  idle: [
    { a: 0, ws: 0, ...line1Def },
    { a: 0, ws: 0, ...line2Def },
  ],
  noise: [
    { a: 4, ws: 9, ...line1Def },
    { a: 3, ws: 9, ...line2Def },
  ],
  voice: [
    { a: 9, ws: 11, ...line1Def },
    { a: 7, ws: 11, ...line2Def },
  ],
}

function Page() {
  const waveRef = useRef()

  const onClick = () => {
    // 建議參考Demo的代碼
    waveRef.current && waveRef.current.setState(Math.random() > 0.5 ? 'noise' : 'voice')
  }

  return <div onClick={onClick}>
    <PCMWave ref={waveRef} stateMap={stateMap} />
  </div>
}

TODO

  1. 增加更多效果

License

MIT 造輪子鍛鍊抽象能力