DEV Community

Cover image for React Developers Visualize Audio Files With ✨ Tarang
sudarshan
sudarshan

Posted on

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"}
      />
  }
}

Enter fullscreen mode Exit fullscreen mode

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"}
      />
  }
}

Enter fullscreen mode Exit fullscreen mode

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...

Top comments (2)

Collapse
 
blanco237 profile image
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

Collapse
 
sudarshansb143 profile image
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.