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 :

1. Separate Thumbnail image
2. Height and width of Thumbnail image
3. Control based of representation of audio
4. Mute or unmute audio
5. 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"}
      />
  }
}

In Tarang, we can directly use the S3 file urls or any other subsequent urls of asset (i.e. both for music files and thumbnails).

It is easy to use and compatible with many frontend frameworks like

Next.js, Gatsby etc.

Currently, it is still in development, but we can some more interesting stuff in upcoming duration

Github Link :

https://github.com/kamalyesh/tarang

😇 Thanks for reading...

Comments

[Blanco237]

Wow this is awesome
I used something like this in a recent project but with the wavesurfer-js module.
Check it out at soundcity.vercel.app

[sudarshan]

This website is awesome.

But, here is one difference. The visualisation/waveform in your site are created before hand and it is static whereas in this package this visualisations are interactive.