Cómo renderizar una imagen de onda de audio desde un archivo de audio MP3 con NAudio en C# WinForms

Aprende a renderizar una imagen de onda de audio desde un archivo de audio usando la biblioteca NAudio en C#

Para muchos creadores de audio, generar una forma visual de representar algo de audio puede ser una manera increíble de promover contenido en línea. Si estás trabajando en algún producto para un músico o trabajos relacionados, su aplicación debería poder generar fácilmente dicho activo. NAudio es una excelente manera de comenzar, ya que necesitará obtener los picos del audio que desea obtener las ondas de audio.

En este artículo, compartiremos con usted una forma muy sencilla de crear tales imágenes de audio de onda con la ayuda de la biblioteca NAudio y las clases de dibujo del sistema.

Requisitos

Deberá instalar la biblioteca NAudio en su proyecto utilizando el administrador de paquetes NuGet. Abra su proyecto Winforms C # y abra el administrador de paquetes NuGet en el explorador de soluciones:

Vaya a la pestaña Examinar y busque NAudio

De la lista, seleccione el paquete NAudio de Mark Heath e instálelo simplemente haciendo clic en el botón Instalar. Una vez que finalice la instalación, podrá importar el espacio de nombres Wave de NAudio en la clase donde desea usarlo así:

using NAudio.Wave;

Si ya tiene NAudio instalado, continúe con la implementación del código.

1. Registre las clases NAudio.WaveFormRenderer en su proyecto

La biblioteca de NAudio por sí sola no ofrece ningún tipo de API de renderizado, en su lugar, deberá confiar en algunas clases personalizadas (publicadas sin embargo por el equipo de NAudio) en su proyecto. Sin embargo, estas clases no están registradas en NuGet, por lo que deberá agregarlas manualmente en su proyecto.

Puede recuperar los archivos mencionados del repositorio oficial de NAudio.WaveFormRenderer , específicamente en el directorio WaveFormRendererLib . Puede clonar todo el proyecto, por ejemplo, con Git:

# Clone el proyecto WaveFormRenderer en algún directorio de su sistema para obtener el
# clases que necesita de este proyecto para crear las imágenes de ondas de audio
git clone https://github.com/naudio/NAudio.WaveFormRenderer.git

La forma más sencilla de incluir las clases del directorio WaveFormRendererLib en su proyecto es agregar las clases existentes con el explorador de soluciones de Visual Studio. Simplemente haga clic derecho en su proyecto, seleccione la opción Agregar y en el menú desplegable seleccione la opción Elemento existente:

Esto abrirá un nuevo explorador de archivos, ahora navegue a la carpeta del proyecto WaveFormRenderer clonado e incluirá las clases del WaveFormRendererLibdirectorio del proyecto clonado:

Esto agregará una copia de las clases en su proyecto y las expondrá en el WaveFormRendererespacio de nombres automáticamente.

2. Generación de la imagen de representación de ondas de audio

La lógica para crear la imagen de ondas de audio es bastante simple con la ayuda de las clases agregadas anteriores. Primero, incluya todos los espacios de nombres que necesitaremos y esas son las clases de WaveFormRendererLib y las clases de dibujo del sistema. Luego, configure los proveedores RMS (Root-Mean-Square) y Peak. Como siguiente paso, personaliza tu imagen con colores, imágenes de fondo y tamaño usando el StandardWaveFormRendererSettings(puedes usar el autocompletado de Visual Studio para conocer todos los parámetros personalizables).

Finalmente, usando una instancia de la WaveFormRendererclase, proporcione los parámetros configurados previamente como argumentos para lanzar el Rendermétodo. Este método devolverá una instancia de imagen del dibujo del sistema, por lo que ahora puede almacenarlo en su sistema fácilmente con el método Guardar, la ventaja de este enfoque es que puede guardarlo con cualquier formato, sin embargo, se recomienda el formato PNG, ya que puede tener transparencia en la configuración del estilo del gráfico:

// Incluya WaveFormRendererLib, el espacio de nombres estará disponible
// una vez que incluyas los archivos del proyecto desde el primer paso
using WaveFormRendererLib;

// Incluir las clases de dibujo del sistema
using System.Drawing.Imaging;
using System.Drawing;

// 1. Configurar proveedores
MaxPeakProvider maxPeakProvider = new MaxPeakProvider();
RmsPeakProvider rmsPeakProvider = new RmsPeakProvider(200); // e.g. 200
SamplingPeakProvider samplingPeakProvider = new SamplingPeakProvider(200); // e.g. 200
AveragePeakProvider averagePeakProvider = new AveragePeakProvider(4); // e.g. 4

// 2. Configurar el estilo de la imagen de la onda de audio
StandardWaveFormRendererSettings myRendererSettings = new StandardWaveFormRendererSettings();
myRendererSettings.Width = 1080;
myRendererSettings.TopHeight = 64;
myRendererSettings.BottomHeight = 64;

// 3. Defina el archivo de audio a partir del cual se creará la onda de audio y defina los proveedores y la configuración
WaveFormRenderer renderer = new WaveFormRenderer();
String audioFilePath = @"C:\Users\sdkca\Desktop\when_the_sun_goes_down_arctic_monkeys.mp3";
Image image = renderer.Render(audioFilePath, averagePeakProvider, myRendererSettings);

// 4. Almacenar la imagen
image.Save(@"C:\Users\sdkca\Desktop\myfile.png", ImageFormat.Png);
// O jpeg, sin embargo, se recomienda PNG si su onda de audio necesita transparencia
// image.Save(@"C:\Users\sdkca\Desktop\myfile.jpg", ImageFormat.Jpeg);

Personalizando gráfica

Como se mencionó anteriormente, puede jugar con la personalización de los picos en StandardWaveFormRendererSettings, por ejemplo, personalizando los colores:

StandardWaveFormRendererSettings myRendererSettings = new StandardWaveFormRendererSettings();
myRendererSettings.Width = 1080;
myRendererSettings.TopHeight = 64;
myRendererSettings.BottomHeight = 64;

// Establecer el fondo del gráfico como transparente
myRendererSettings.BackgroundColor = Color.Transparent;

// Cambiar el color de los picos
myRendererSettings.TopPeakPen = new Pen(Color.DarkGreen);
myRendererSettings.BottomPeakPen = new Pen(Color.Green);

Esto trazaría un gráfico como:

Ejemplo completo

En este pequeño fragmento de un formulario de Windows, tendrá un botón simple que activará la lógica para generar la imagen cuando se haga clic en él:

using System;
using System.Windows.Forms;

// Incluir WaveFormRendererLib
using WaveFormRendererLib;
using System.Drawing.Imaging;
using System.Drawing;

namespace Sandbox
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            MaxPeakProvider maxPeakProvider = new MaxPeakProvider();
            RmsPeakProvider rmsPeakProvider = new RmsPeakProvider(200); // e.g. 200
            SamplingPeakProvider samplingPeakProvider = new SamplingPeakProvider(200); // e.g. 200
            AveragePeakProvider averagePeakProvider = new AveragePeakProvider(4); // e.g. 4

            StandardWaveFormRendererSettings myRendererSettings = new StandardWaveFormRendererSettings();
            myRendererSettings.Width = 1080;
            myRendererSettings.TopHeight = 64;
            myRendererSettings.BottomHeight = 64;

            WaveFormRenderer renderer = new WaveFormRenderer();
            String audioFilePath = @"C:\Users\sdkca\Desktop\when_the_sun_goes_down_arctic_monkeys.mp3";
            Image image = renderer.Render(audioFilePath, averagePeakProvider, myRendererSettings);

            image.Save(@"C:\Users\sdkca\Desktop\mywave.png", ImageFormat.Png);
        }
    }
}

La ejecución del código anterior y al hacer clic en el botón, generará la siguiente imagen: