A UI library for easily adding audio waveforms to your apps, with several customization options

Related tags

Templates flutter_audio_waveforms
Overview

Pub.dev Badge MIT License Badge

A UI library for easily adding audio waveforms to your apps, with several customization options.

Features

You can use the following available waveform types.

  • Polygon
  • Rectangle
  • Squiggly


Need to add some gradient to your waveform? Say no more! You get it along with other customization options.


Want an active track for your audio out of the box? You get that too!

Getting started

The package gives you the ability to add waveforms and customize them. It's mostly like a UI library for waveforms with an additional ability to show active track for playing audio.

So it relies on you to provide the necessary audio data which it needs to draw the waveform. The data we need is basically a list of points/samples that represents that audio.

You can use this audiowaveform program to get the audio json file which will provide us the samples. After installing this program on your machine, generate the json file for an audio by using this command in your terminal.

audiowaveform -i test.mp3 -o test.json

The generated data needs to be processed following some rules which are necessary to get the waveforms drawn properly. To process the data use this processor.

Once you have the processed data points list then you can just pass it down to any of the waveforms available and get started using them.

Usage

Usage of all waveforms available is the same with only exception of having more/less customization options for different waveforms.

 PolygonWaveform( 
   maxDuration: maxDuration,
   elapsedDuration: elapsedDuration,
   samples: [],
   height: height,
   width: width, 
 )
 RectangleWaveform(
   maxDuration: maxDuration,
   elapsedDuration: elapsedDuration,
   samples: [],
   height: height,
   width: width,
 )
 SquigglyWaveform(
   maxDuration: maxDuration,
   elapsedDuration: elapsedDuration,
   samples: [],
   height: height,
   width: width,
 )

Find detailed example here.

Properties

maxDuration:

Maximum duration of the audio.

elapsedDuration:

Elapsed Duration of the audio.

samples:

List of the audio data samples.

Check the Getting Started section on how to generate this.

height :

Waveform height.

width :

Waveform width.

Customization Options

inactiveColor :

Color of the inactive waveform.

activeColor :

Color of the active waveform.

inactiveGradient :

Gradient of the inactive waveform.

activeGradient :

Gradient of the active waveform.

absolute :

Waveform drawn is one sided either above x-axis or below it depending on what invert is set to.

Defaults to false.

invert :

Flips/inverts the waveform upside down.

Defaults to false.

borderWidth :

Width of the border around waveform.

Available only for RectangleWaveform.

strokeWidth :

Waveform stroke width.

Available only for SquigglyWaveform.

inactiveBorderColor:

Border color for inactive waveform.

Available only for RectangleWaveform.

activeBorderColor:

Border color for active waveform.

Available only for RectangleWaveform.

showActiveWaveform:

Whether to show active waveform or not.

Defaults to true.

More customization options coming soon!

Contributing Guide

  • Feature request :
    If you have any new feature in mind from which this package can benefit then please let me know by filing an issue here.

  • Improvements :
    Got any suggestions on improving the package, anything from API to performance then let me know by filing the issue here.

  • Bugs:
    If you happen to come across anything that shoudln't be happening then please file an issue here describing what the bug is and how to reproduce it with attached code and preview if possible.

Additional information

What started as a challenge out of curiosity, is now a package that I hope will be helpful to many of you and it was actually really fun building it.

Learned some good stuff while working on it and I hope to make it much more going forward.

If this package helped you then I would appreciate a like here which would be enough for me to keep continue working on it and if it really really helped you then feel free to drop by and say hi.

Comments
Owner
RutvikTak
RutvikTak
GitHub https://pub.dev/packages/flutter_audio_waveforms
A most easily usable cookie management library in Dart. With SweetCookieJar, you can easily manage cookie on your application.

A most easily usable cookie management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use SweetCookieJar 1

Kato Shinya 9 Oct 27, 2022
A most easily usable cache management library in Dart. With CacheStorage, you can easily manage cache on your application.

A most easily usable cache management library in Dart! 1. About 1.1. Introduction 1.1.1. Install Library 1.1.2. Import It 1.1.3. Use CacheStorage 1.2.

Kato Shinya 1 Dec 13, 2021
A most easily usable RESAS API wrapper in Dart. With this library, you can easily integrate your application with the RESAS API.

A most easily usable RESAS API wrapper library in Dart! 1. About 1.1. What Is RESAS? 1.2. Introduction 1.2.1. Install Library 1.2.2. Import It 1.2.3.

Kato Shinya 2 Apr 7, 2022
Simple app for both Android and Windows to sync Audio Trip songs from the Audio Trip Choreography Discord

ATCD Choreography Sync Simple app for both Android (Oculus Quest native) and Windows (PCVR) to sync Audio Trip songs from the Audio Trip Choreography

atcd 2 Nov 15, 2022
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Luke Pighetti 3.5k Jan 4, 2023
Flutter plugin for selecting images from the Android and iOS image library, taking new pictures with the camera, and edit them before using such as rotation, cropping, adding sticker/text/filters.

advance_image_picker Flutter plugin for selecting multiple images from the Android and iOS image library, taking new pictures with the camera, and edi

Weta Vietnam 91 Dec 19, 2022
A simple package for adding water drops to your Widgets!

Water Drop ?? ?? ?? A simple package for adding water drops to your Widgets! ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? Blog article with detailed explanation: htt

Marcin Szałek 46 Jun 30, 2022
This is an easy to use Flutter Package for adding Fancy Foldable Sidebar to your Flutter Applications.

Foldable Sidebar An easy to implement Foldable Sidebar Navigation Drawer for Flutter Applications. Current Features Initial Release for Foldable Navig

Paras Jain 87 Nov 26, 2022
🔥🚀 Flutter package to create Pin code input text field with every pixel customization possibility 🎨 with beautiful animations

Flutter PinPut From Tornike ?? ?? Flutter package to create Pin code input (OTP) text field with every pixel customization possibility ?? and beautifu

Tornike 451 Jan 2, 2023
This package supports an animated icon with some customization.

animated_icon This package supports an animated icon with some customization. It includes an icon type, animation as well as onTap() parameters throug

MindInventory 12 Dec 23, 2022
Slider controller - A package that gives us a slider controller a custom widget. This widget is used for easy customization for the slider widget

slider_controller A package that gives us a slider controller a custom widget. T

MindInventory 15 Sep 5, 2022
A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

A package that gives us a modern way to show animated border as a placeholder while loading our widget with easy customization and ready to use.

Mohit Chauhan 8 Oct 3, 2022
A counter widget for flutter that support different kinds of customization.

Customizable Counter A counter widget that support different kinds of customization. Installation From pubspec.yaml Add the following line to pubspec.

Md. Imam Hossain 2 Sep 6, 2022
A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also have privilege for fully customization from user side. like flipkart, amazon, myntra, meesho.

step_tracker plugin A Flutter step_tracker plugin is collect information from user and display progress through a sequence of steps. this plugin also

Roshan nahak 5 Oct 21, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Festus Olusegun 116 Dec 27, 2022
A carousel package in flutter with various configuration options

Flutter_Carosel A simple Carousel Widget with multiple configuration option. ... dependencies: ... flutter_multi_carousel: ^1.0.0 ... And install it

GeekyAnts 67 Oct 2, 2022
A Flutter application organizing access to information on University of Toronto Food Options.

UofT Foods Description A Flutter Mobile App designed to aid UofT Students and Staff easily find food options across all campuses. Features Campus Sele

Kyrel Jerome 2 Jan 8, 2021
Tic Tac Toe game with single-player and multi-player options. Implemented minimax algorithm.

flutter_tic_tac_toe A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you star

null 0 Jan 1, 2022
A Flutter select form field widget. It shows a list of options in a dropdown menu.

select_form_field A Flutter select field widget. It shows a list of options in a dropdown menu. This widget extend TextField and has a similar behavio

m3uzz Soluções em TI 8 Sep 14, 2022