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

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 造輪子鍛鍊抽象能力