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

GardenJerry 发布于14天前

pc-pcm-wave

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

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

Live Demo

Link

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

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

查看原文: pc-pcm-wave 一个简单录音波纹 Preact 组件

  • tinyduck867
  • whitedog
  • redrabbit
  • MargeryDolores