how to create spectrum graph in maui?

Question

I want to get spectrum graph of voices(musics)

how to do it?

Answer 1

Hello,

Firstly, MAUI do not have this control to show spectrum graph of voices(musics).

However, we can use the skiasharp(install SkiaSharp.Views.Maui.Controls) to draw it.

Then, please open your MauiProgram.cs, init this NuGet package.

 public static MauiApp CreateMauiApp()
 {
     var builder = MauiApp.CreateBuilder();
     builder.UseSkiaSharp()

Open your layout to control SkiaSharp.

<ContentPage 
...
                          xmlns:skia="clr-namespace:SkiaSharp.Views.Maui.Controls;assembly=SkiaSharp.Views.Maui.Controls"
...
            >
<skia:SKCanvasView x:Name="SpectrumCanvas"
               PaintSurface="OnPaintSurface"
               HeightRequest="300"
               WidthRequest="400" />

Then open your layout background code. I use static data to init this spectrumData, if you have get the audio stream, you need to convert stream to byte[], then use FFT (Fast Fourier Transform) analysis to transform the audio signal from the time domain to the frequency domain to obtain frequency and amplitude data. Some third-party Libraries could implement this, you can use them.

After FFT, you can get the float[] to fill the spectrumData to draw it.

By the way, you can fresh this Skiasharp view by SpectrumCanvas.InvalidateSurface();

private readonly float[] spectrumData = { 0.1f, 0.5f, 0.7f, 0.2f, 0.8f, 0.4f, 0.6f };
private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    var info = e.Info;

    canvas.Clear(SKColors.White);
    

    float barWidth = info.Width / (float)spectrumData.Length;
    float maxHeight = info.Height;

    for (int i = 0; i < spectrumData.Length; i++)
    {
        float x = i * barWidth;
        float barHeight = spectrumData[i] * maxHeight;
        float y = maxHeight - barHeight;

//Gradient color (adjust hue according to frequency) 
        var color = SKColor.FromHsv((i / (float)spectrumData.Length) * 360, 100, 100);

        var paint = new SKPaint
        {
            Color = color,
            StrokeWidth = 4,
            IsAntialias = true
        };

        canvas.DrawRect(x, y, barWidth - 5, barHeight, paint);
    }
}

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.