audio frequency visualization using d3 graph for react
npm install --save tarangThe version 1.1.0 starts development in direction of support for playlist. If you want to use Tarang for simply visualization of single audio track, you may want to use previous stable version 1.0.8.
loop: to loop current audioonEnded: event that is fired after the audio has ended- pause button: when controls are visible, play and pause button can be toggled in between
import React, { Component } from 'react'
import Tarang from 'tarang'
import 'tarang/dist/index.css'
class Example extends Component {
render() {
return <Tarang.Bar
loop={true}
width={500}
height={200}
scale={1}
controls={true}
muted={false}
volume={0.8}
audioUrl={"url-of-mp3-file"}
coverArtUrl={"url-of-cover-art-image-file"}
/>
}
}import React, { Component } from 'react'
import Tarang from 'tarang'
import 'tarang/dist/index.css'
class Example extends Component {
render() {
return <Tarang.Line
onEnded={() => alert("song ended")}
width={500}
height={200}
scale={1}
controls={true}
muted={false}
volume={0.8}
audioUrl={"url-of-mp3-file"}
coverArtUrl={"url-of-cover-art-image-file"}
/>
}
}- make sure that the width is of power of two (e.g., 2, 4, 8, etc)
loopandonEndedif used together, can be used to change the track after current track has ended.
MIT © kamalyesh
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent