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