How to Implement Horizon: A Simple Visual Equaliser for Android

Jul 23, 2022 | Programming

If you’re looking to add a visually appealing equalizer to your Android audio project, you’re in the right place! Horizon is a project developed by Yalantis that serves as a great model. Here, we’ll guide you through the process of implementing it in user-friendly steps.

Getting Started with Horizon

Horizon is not just about eye-catching graphics; it also utilizes the power of C++ for efficient sound analysis while keeping Java for minor calculations. This hybrid approach allows for customization and optimization. Let’s break down the implementation process.

Steps to Implement Horizon

  • Include the Library:
  • To start, you need to add the library as a local project in your Android application:

    compile com.yalantis:eqwaves:1.0.1
  • Initialize the Horizon Object:
  • Set up your Horizon object with parameters tailored to your sound setup:

    mHorizon = new Horizon(glSurfaceView, getResources().getColor(R.color.background),
                        RECORDER_SAMPLE_RATE, RECORDER_CHANNELS, RECORDER_ENCODING_BIT);
  • Update the View with Sound Data:
  • As sound data comes in, make sure to pass it to the Horizon for updating visuals:

    byte[] buffer = new byte[bufferSize];
    // Insert sound data into buffer
    mHorizon.updateView(buffer);

Understanding Bezier Curves and OpenGL ES

The visualizations in Horizon utilize Bezier curves—think of them like animated waves in a calm ocean. Each wave represents different frequencies of sound. Drawing these shapes accurately but efficiently is crucial for creating smooth visuals. Here’s how:

Using Android Canvas

While you can draw Bezier curves on Android Canvas, the performance can be lacking, similar to trying to paint a full mural with just a single brush stroke. Instead of struggling with that single brush, we can achieve better results using OpenGL ES to render our waves. This is like using multiple brushes to create a detailed masterpiece!

Drawing with OpenGL ES

To manage your waves using OpenGL ES:

  1. Split every Bezier curve into an even number of points.
  2. Generate triangles where the center vertex is at (0, 0) and other vertices lie on the curve.
  3. Color the triangles to bring your waves to life!

Shader Pipeline

Shaders are like the invisible artists that help us render visuals efficiently. Using the OpenGL Shading Language, we define uniforms and attributes essential for our Bezier curves:

  • Uniform Variables: These represent properties that apply to the entire wave.
  • Attributes: These are for individual vertices and guide how the curve forms.

The blending techniques available in OpenGL will ensure that the colors smoothly transition, creating that stunning visual effect.

Troubleshooting

Even the best laid plans may encounter snags. Here are some troubleshooting tips:

  • Performance Issues: If the visualizer is lagging, check the number of points on the Bezier curves. Reducing complexity can lead to smoother performance.
  • Rendering Problems: Ensure that the OpenGL context is correctly set up. Without proper context, your visuals may not render as intended.
  • Sound Data Handling: If the visualizer is not updating with sound data, ensure your buffer is being filled correctly with audio input.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox