0.8.0 • Published 8 months ago

sound-ui v0.8.0

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

Sound UI

Sound UI Components with React.

Usage

Waves

Display waves from audio file.

import { Waves } from "sound-ui";

export const Default = () => {
  const [dataUrl, setDataUrl] = useState("");
  const [normalize, setNormalize] = useState(false);

  const selectFile = (e: ChangeEvent<HTMLInputElement>) => {
    const files = e.currentTarget.files;
    if (!files || files?.length === 0) return;
    const file = files[0];
    const reader = new FileReader();
    reader.addEventListener(
      "load",
      () => {
        if (reader.result) {
          setDataUrl(reader.result.toString());
        }
      },
      false
    );
    if (file) {
      reader.readAsDataURL(file);
    }
  };

  const handleNormalize = () => {
    setNormalize(!normalize);
  };

  return (
    <>
      <input type="file" accept="audio/*" onChange={selectFile} />
      <button onClick={handleNormalize}>
        Normalize ({normalize ? "ON" : "OFF"})
      </button>
      <br />
      <Waves
        dataUrl={dataUrl}
        width={800}
        height={400}
        samplingLevel={0.01}
        normalize={normalize}
        selectable
      />
    </>
  );
};

Parameters

  • dataUrl(require:string): set Data URL (start at "data:audio/mpeg;base64,...")
  • width(require:number): set Component width
  • height(require:number): set Component height
  • samplingLevel(optional:number): detail of waves (max:0.001, othre:0.01 0.1 1)
  • normalize(optional:boolean): set true to normalize waves
  • selectable(optional:boolean): set true to select range on waves
  • stereo(optional:boolean): set true, mixing two stereo waveforms into a single waveform
  • setMaxArea(optinal:(area: number[])=>void): return Maximum section, array 0 is start second, array 1 is end second

Preview

npm run preview

View1

0.8.0

8 months ago

0.7.2

11 months ago

0.7.1

11 months ago

0.4.0

11 months ago

0.7.0

11 months ago

0.5.2

11 months ago

0.6.0

11 months ago

0.5.1

11 months ago

0.3.1

1 year ago

0.3.0

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.1

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago