How to add AudioWaveforms to your Flutter apps?
Sometime back in November, I was intrigued🤩 by this idea of creating waveforms for audio. I wanted to display the inactive waveform and also the active waveform for elapsed portion of the playing audio. It was an interesting challenge so I took it on. And exactly after a month, Flutter Audio Waveforms was born.🌈 🎉
Flutter Audio Waveforms is an UI library for easily adding audio waveforms to your apps, with several customization options.
In this article, we’ll look into how we can get started using it and some prerequisite for it.
Table Of Content :
- Getting audio json data from audio file.
- Processing the raw data.
- Using the package to add waveform.
- Conclusion
1. Audio Json data:
Before using the package, we need some audio data which represents the waveform and the package uses that data to show the waveform.
If you’re worried this step is gonna be complex😅, don’t worry, it’s not.😉
The data that we are looking to get looks like this here. There’s already an OS program called audiowaveform that generates this for us for any audio file.
The installation instruction are detailed here for different operating systems.
Once you’ve the program installed, then you can run this following command in terminal which takes in the audio file location for which you want to get the json data and an export location for that json data.
audiowaveform -i test.mp3 -o test.jsonThis will produce the json data for the audio file.
Once we got that, next step is to process the raw data before being used.
2. Processing the raw data:
Processing data is important part of the process. Only thing we need from the audio json data is this list of data points which we’ll process before using.
data : [ 0,2,34,352,5,.....]We’ll use this processor function to process the data points list(or samples list).
We are just dividing the whole raw data point list into blocks of certain length which is determined by blockSize and taking average of the points within that block and adding that point in our filteredData list and then applying operations on filteredData to process further.
This will give us the processed/filtered data points list which we can use.
3. Using the package:
Add the flutter_audio_waveform to your pubspec.yaml
flutter_audio_waveforms: ^1.0.0+1or just run this command in root folder to add it as a dependancy.
flutter pub add flutter_audio_waveformsOnce installed, the usage of package is really easy. Just like this👇
PolygonWaveform(
maxDuration: maxDuration,
elapsedDuration: elapsedDuration,
samples: [],
height: height,
width: width,
)PolygonWaveform is one of the waveforms available within the package that you can use.
Here you can pass the data points list to the sample parameter that we got after processing.
You can find a proper example of the implementation here. 👇
There are other types of waveforms available that you can use and customize them according to your need. Following demo explores all of them.👇
4. Conclusion:
- We learned about prerequisite for using the package which includes generating audio json file and processing the data before being used.
- Used Flutter Audio Waveforms to add the waveform by passing required parameters.
Awesome!🥳 You are now ready to add ✨ beautiful waveforms to your apps with very little efforts. If you’re curious about how the package is build and interested in getting your hands dirty in the source code then check it out here.
👏 Enjoyed the article! Would appreciate the clap :)
🚀 More such articles coming where we explore flutter and other interesting stuff in app development.
👋 Follow up for upcoming articles if you enjoyed reading and learning from what I write.
💬 Let me know what you liked and what you would like to read in upcoming articles.
