pc-pcm-wave 一个简单录音波纹 Preact 组件

pc-pcm-wave

一个简单的 pcm 波纹效果, 适用于 preact 项目, hooks 编写, 有如下特性

1. 可自定义状态数量
2. 可自定义线的数量、粗细、颜色、波速、振幅、延迟等参数

Live Demo

Link

Props

Props Type: StateMap

Props Type: State

VM Public Methods

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 造轮子锻炼抽象能力