React-wavecanvas NPM

react-wavecanvas

This project is a library for visualizing music using React.js.

Install & Example

Install

yarn install react-wavecanvas

Example

> cd example && yarn start

Get Started

import React, { Component } from "react";

import WaveCanvas from "react-wavecanvas";

export default class App extends Component {
  render() {
    return (
      <div>
        <WaveCanvas
          url="http://localhost:3000/sample.mp3"
          color={"blue"} // text or rgb format (ex. rgb(0, 0, 0)
          width={500}
          height={200}
          isCursorShow={true}
        />
      </div>
    );
  }
}

Props

Key	Value
url	Audio Resource URL (mp3 and wav).Other formats conform to use of WebAudio
color	text format or rgb format. ex.) blue red rgb(0,0,0)
width	Width of canvas element.
height	Height of canvas element.
isCursorShow	Seek cursor visibllity turn on/off.

License

@infinitebrahmanuniverse/nolb-react-wa @everything-registry/sub-chunk-2623

1.0.0

6 years ago

0.0.1

6 years ago