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>
  );
};