How to Generate and Utilize Audio Waveforms in Your Application

Aug 13, 2022 | Programming

Welcome to an exciting journey into the world of audio waveforms! This guide will walk you through the process of implementing a versatile plugin that enables you to generate waveforms while recording audio, manipulate them and much more. Let’s dive in!

What are Audio Waveforms?

Audio waveforms are visual representations of sound. They depict how sound waves oscillate over time, giving you a way to analyze audio visually. This plugin makes it easy to generate waveforms for any audio file formats supported by the given encoders.

Installation Steps

Let’s get your environment ready to go!

  • Add the dependency to your pubspec.yaml:
  • dartyaml
    dependencies:
      audio_waveforms: latest-version
      *Get the latest version from the Installing tab on pub.dev*
        
  • Import the audio_waveforms package:
  • dart
    import 'package:audio_waveforms/audio_waveforms.dart';
        

Platform Specific Configuration

Depending on the platform you are targeting, you need to make sure specific configurations are in place.

Android Configuration

  • Change the minimum Android SDK version to 21 or higher in your android/app/build.gradle file:
  • minSdkVersion 21
        
  • Add the RECORD_AUDIO permission in your AndroidManifest.xml:
  • 
        

iOS Configuration

  • Modify ios/Runner/Info.plist by adding:
  • 
    NSMicrophoneUsageDescription
    This app requires Mic permission.
        
  • Ensure you specify the platform in your Podfile:
  • platform :ios, '12.0'
        

Recording Audio

Time to get hands-on! Here’s how to record audio and generate waveforms.

  • Initialize the recorder:
  • dart
    RecorderController controller = RecorderController();
        
  • Start recording:
  • await controller.record(path: path);
        
  • Pause, stop, refresh, and dispose:
  • await controller.pause();
    final path = await controller.stop();
    controller.refresh();
    controller.dispose();
        

Using AudioWaveforms Widget

Now let’s visualize the recorded audio data.

dart
AudioWaveforms(
  size: Size(MediaQuery.of(context).size.width, 200.0),
  recorderController: controller,
  enableGesture: true,
  waveStyle: WaveStyle(
    color: Colors.white,
    showDurationLabel: true,
    spacing: 8.0,
    extendWaveform: true,
    gradient: ui.Gradient.linear(
      const Offset(70, 50),
      Offset(MediaQuery.of(context).size.width * 2, 0),
      [Colors.red, Colors.green],
    ),
  ),
),

Using the Player

If you want to play the audio back, use the following:

dart
PlayerController controller = PlayerController();
await controller.preparePlayer(path: path, shouldExtractWaveform: true, noOfSamples: 100);
await controller.startPlayer(finishMode: FinishMode.stop);

Troubleshooting

If you encounter issues, consider the following:

  • Check your platform-specific configurations to ensure permissions are correctly set.
  • Ensure you have the latest version of the plugin by checking pub.dev.
  • If the app crashes, verify that you have added audio session management in your app’s initialization.

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