Pudn.com > 下载中心 > 快速开发平台 > x-waveform

x-waveform

music web-component ui Waveform webaudio

所属分类：快速开发平台
开发工具：TypeScript
文件大小：0KB
下载次数：0
上传日期：2022-08-01 14:22:41
上传者：sh-1993

说明：音频波形可视化工具Web组件。，
(Audio waveform visualizer Web Component.,)

文件列表:

.eslintrc.js (1029, 2022-08-01)
.husky/ (0, 2022-08-01)
.husky/pre-push (58, 2022-08-01)
.npmrc (33, 2022-08-01)
.pull-configs.js (2216, 2022-08-01)
.swcrc (483, 2022-08-01)
LICENSE (1046, 2022-08-01)
dprint.json (865, 2022-08-01)
example/ (0, 2022-08-01)
example/alpha_molecule.ogg (6156088, 2022-08-01)
example/web.html (15995, 2022-08-01)
example/web.png (22684, 2022-08-01)
example/web.ts (1073, 2022-08-01)
index.html (51669, 2022-08-01)
package.json (3427, 2022-08-01)
src/ (0, 2022-08-01)
src/index.ts (29, 2022-08-01)
src/x-waveform-worker.ts (2826, 2022-08-01)
src/x-waveform.ts (4435, 2022-08-01)
tsconfig.dist.json (331, 2022-08-01)
tsconfig.json (1011, 2022-08-01)
types/ (0, 2022-08-01)
types/globals.d.ts (139, 2022-08-01)
types/modules.d.ts (65, 2022-08-01)

x-waveform

Audio waveform visualizer Web Component

`npm i x-waveform` `pnpm add x-waveform` `yarn add x-waveform`

## Examples

# web

Try it live

# view source

example/web.ts

```ts import { fetchAudioBuffer } from 'webaudio-tools' import { WaveformElement } from 'x-waveform/dist/esm' customElements.define('x-waveform', WaveformElement) document.body.innerHTML = `

` const ctx = new AudioContext({ sampleRate: 44100, latencyHint: 'playback' }) const analyser = ctx.createAnalyser() analyser.fftSize = 512 analyser.smoothingTimeConstant = 0 analyser.maxDecibels = 0 analyser.minDecibels = -100 // @ts-ignore const url = new URL('alpha_molecule.ogg', import.meta.url).toString() fetchAudioBuffer(ctx, url).then(audioBuffer => { const source = ctx.createBufferSource() source.buffer = audioBuffer source.loop = true source.connect(ctx.destination) source.start(0, 75) source.connect(analyser) ;(document.querySelector('x-waveform') as WaveformElement).analyser = analyser }) window.onclick = () => ctx.state !== 'running' ? ctx.resume() : ctx.suspend() if (ctx.state !== 'running') document.body.appendChild(new Text('click to start/stop')) ```

## API

# WaveformElement

src/x-waveform.ts#L29

# constructor()

# new WaveformElement()

WaveformElement

# $

src/work/stagas/sigl/dist/types/sigl.d.ts#L25

Context<WaveformElement & JsxContext<WaveformElement> & Omit<{

# ctor

Class<T>

CleanClass