pc-pcm-wave 一个简单录音波纹 Preact 组件
2013 年 3 月 23 日
pc-pcm-wave
一个简单的 pcm 波纹效果, 适用于 preact 项目, hooks 编写, 有如下特性
- 可自定义状态数量
- 可自定义线的数量、粗细、颜色、波速、振幅、延迟等参数
Live Demo
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
}
TODO
- 增加更多效果
License
MIT 造轮子锻炼抽象能力
About The Author
