visual-audio-selection

vue-stocks/crypto-heatmap

A simple music visualization and select app built with React

Installation

npm install visual-audio-selection

Audio Visualization and Select Component

Unilateral Audio Selection

Ranged Audio Selection

Props

Common Props

props	description	required
audioBlob	Blob of audio file	*
width	Width of the audio wave canvas	*
height	Height of the audio wave canvas	*
lineWidth	Width of the lines - default is 1
gap	Gap between the lines - default is 0
progress	Progress of the audio
isPlaying	Indicates if the audio is playing	* required when progress is provided
waveColor	Hex value of the lines color
incompleteWaveColor	Hex value of the lines color when not selected
backgroundColor	Hex value of the background color
incompleteAlphaValue	Alpha value of the lines when not selected - default is 0.5
onChange (unilateral)	Callback function to be called when a new end is selected. Passes percentage as an argument in the range of 1-0
onChange (ranged)	Callback function to be called when a new range is selected (start or end). Passes start and end as an argument in the range of 1-0

Example:

import React, { useRef, useState } from "react";
import {AudioSelectVisualizer} from "visual-audio-selection";

const App = () => {
  const [audioBlob, setAudioBlob] = useState<Blob | null>(null);
  const audioRef = useRef<HTMLAudioElement>(null);
  const [end, setEnd] = useState(1);
  const [progress, setProgress] = useState(100);
  const [isPlaying, setIsPlaying] = useState(false);

  React.useEffect(() => {
    fetch("/audio.wav")
      .then((r) => r.blob())
      .then((r) => setAudioBlob(r));
  }, []);

  const handleOnPlay = () => {
    if (audioRef.current) {
      if (audioRef.current.currentTime > end * audioRef.current.duration) {
        audioRef.current.pause();
      }
    }
  };

  return (
    <div>
      {audioBlob && (
        <AudioSelectVisualizer
          audioBlob={audioBlob}
          width={1200}
          height={400}
          lineWidth={17}
          gap={5}
          progress={progress}
          isPlaying={isPlaying}
          onChange={(end) => {
            setEnd(end);
            if (audioRef.current) {
              audioRef.current.currentTime = 0;
            }
          }}
        />
      )}
      <audio
        controls
        ref={audioRef}
        src="/audio.wav"
        onPlay={() => setIsPlaying(true)}
        onPause={() => setIsPlaying(false)}
        onEnded={() => setIsPlaying(false)}
        onTimeUpdate={(e) =>
          setProgress(e.currentTarget.currentTime / e.currentTarget.duration)
        }
        onTimeUpdateCapture={handleOnPlay}
      />
    </div>
  );
};