React Developers Visualize Audio Files With ✨ Tarang

Hi Folks,

Have you ever wondered, how to visualize an 🎧 audio 🎧 in your react app ? or how to snow an animated, beat synced UI for currently playing music ?

Will explore it in this article

🎇 Tarang 🎇

Tarang is a NPM package, which enables the visualization of audio files. It uses D3 based chart and line animations in order to create svg-based visualization.

By using Tarang, any one can visualize audio files with ease. By enabling beat catch-up and some smooth, glorifying animations Tarang allows us to create superbb... USER experience.

by using cool animation it does fantastic animation's without adding much overhead in front end apps.

There are several options currently exposed by Tarang enlisted as :

Separate Thumbnail image

Height and width of Thumbnail image

Control based of representation of audio

Mute or unmute audio

Play on focus and stop on unfocus

Usage

1. 📊 Bar Visualizations

Bar visualization enables bar-chart like animations. Which can be used as

import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Bar
        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"}
      />
  }
}

2. 📈 Line Graph :

Line visualization enables typical graph-line like animations. Which are created as follows

import React, { Component } from 'react'

import Tarang from 'tarang'
import 'tarang/dist/index.css'

class Example extends Component {
  render() {
    return <Tarang.Line
        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"}
      />
  }
}