Waveform UI Control for Solid JS apps
Install it:
npm i solid-waveform
# or
yarn add solid-waveform
# or
pnpm add solid-waveform
Use it:
import { Waveform, Regions, PlayHead, Region } from "solid-waveform";
const [audioBuffer] = createResource(...);
const [position, setPosition] = createSignal(0);
const [playHeadPosition, setPlayHeadPosition] = createSignal(0);
const [zoom, setZoom] = createSignal(1);
const [scale, setScale] = createSignal(1);
const [logScale, setLogScale] = createSignal(false);
const [regions, setRegions] = createSignal<Region[]>([]);
<Waveform
style={{ height: "300px" }}
buffer={audioBuffer()}
position={position()}
zoom={zoom()}
scale={scale()}
onPositionChange={setPosition}
onZoomChange={setZoom}
onScaleChange={setScale}
strokeStyle="#121212"
>
<Regions
regions={regions()}
onUpdateRegion={(region) => {
const index = regions().findIndex(({ id }) => id === region.id);
setRegions([...regions().slice(0, index), region, ...regions().slice(index + 1)]);
}}
onCreateRegion={(region) => {
setRegions([...regions(), region]);
}}
onClickRegion={playRegion}
/>
<PlayHead
playHeadPosition={playHeadPosition()}
sync
onPlayHeadPositionChange={(newPlayheadPosition) => {
setPlayHeadPosition(newPlayheadPosition);
}}
/>
</Waveform>;
import { Oscilloscope } from "solid-waveform";
const analyzerNode = new AnalyzerNode(...)
<Oscilloscope
style={{ height: "300px" }}
analyzerNode={analyzerNode}
/>;