Yalantis has released several apps with audio recording functionality. Halaa – the Instagram for voice and video is the latest example of our work with audio technologies. Every time we want to add some cool visualisation for music, however, we have to deal with a lot of issues.
First, there are no simple and convenient Android libraries for analyzing audio files. Admittedly, there are some pretty good sound processing libraries available such as TarsosDSP, Sound Powered, ffmpeg and others. But they are all huge and complicated to work with, especially for those who don't have any experience with sound theory.
Second, to produce smooth animations, audio should be analysed and rendered rather quickly. While there are open source solutions that enable fast rendering, these solutions tend to address only a few aspects of sound animation, not all of them.
During our research at Yalantis we came across three solutions that caught our eye. Even though these solutions didn’t give us exactly the analysis and visualization capabilities we were looking for, they showed us examples of what we could improve upon.
Why these 3 libraries don’t provide an adequate solution for sound visualisation
Offering cute animations, WaveInApp generates smooth waves to visualize sound. This solution is implemented with OpenGL, so there are no issues with performance. But the downside of this library is that it’s based on the native Android Visualiser. This means you cannot connect the animations to live microphone input. In other words, there is no way you can make use of this library during audio recording.
The AudioVisualizer is another music visualiser, a library that provides a large variety of visual effects, but has the same disadvantages as CRAudioVisualizationView. Additionally, all of its effects are a bit old-school and give you the unpleasant feeling that you’re using Windows Media Player.
At last someone who provides their own sound analysis! But on the other hand, visualization capabilities offered by this library are pretty basic, showing only the sound spectrum. This library almost looks as if it were published as a tutorial for those wanting to work with FFT.
Horizon: a Library That Visualizes Sound Quickly and Beautifully
We decided to create our own audio visualiseras the base for our audio projects. We wanted a solution that will work as Android music visualizer. Horizon proves that Android can actually be great with audio, despite prevailing opinions. There is a lack of Android libraries for sound visualization, and we decided to fix t with our solution.
We had two main goals for our Horizon library:
1) excellent performance
2) excellent graphics.
There aren’t many ways to significantly improve performance for an Android app. The first issue we had to tackle was calculation. The audio spectrrum is essential for music track visualization. To analyze the audio spectrum and apply it to the view you need to do a lot of math, and you need to do it fast.
We implemented most of our sound analysis in C++. This language reduces the time required to fetch the spectrum of sounds. While most of our analysis code was written in C++, we still did minor calculations in Java to make our component easy to customize.
The design of Horizon reminds us of a beautiful sunset over the sea. This is the reason we called our library Horizon (and also because we like the band Bring Me the Horizon). You can check out Horizon on Dribbble and Github.
Colors and shapes in our component had to be juicy and bright. That’s why we needed to implement proper blending. Also, we had to draw all curves as fast as possible. We implemented drawing using OpenGL to create a smooth user experience.
Read also: How to Create an App Design That Works
Horizon is a cute component that shows proportions of sound frequency for a specific chunk of audio data.
You can see Horizon in action on this video:
We want to thank Zagreb and Igor Muzyka, our iOS developer who are part of Zagreb music band for letting us play some chords with Horizon.
How can you add Horizon to your project?
To add Horizon to your project you need to follow these three easy steps:
1) Include the library as a local library project:
2) Initialize the Horizon object with params referring to your sound:
mHorizon = new Horizon(glSurfaceView, getResources().getColor(R.color.background), RECORDER_SAMPLE_RATE, RECORDER_CHANNELS, RECORDER_ENCODING_BIT);
3) To update view, call the updateView method with a chunk of sound data to be proceeded:
byte buffer = new byte[bufferSize]; //here we send some sound data to the buffer mHorizon.updateView(buffer);
Enjoy the Horizon!
Check out the Horizon sound visualizer on: