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