34

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

 4 years ago
source link: https://github.com/deepkolos/pc-pcm-wave
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

pc-pcm-wave

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

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

Live Demo

Link

7Jv2Q3e.jpg!web

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK