Blazor.WaveSurfer

.NET wrapper for the popular wavesurfer.js library

Requires:

• .net 8
• Microsoft.JSInterop

Client-side configuration:

Just import the wavesurfer.js library and make it globally available:

import WaveSurfer from 'wavesurfer.js';
window.WaveSurfer = WaveSurfer;

or:

window.WaveSurfer = require('wavesurfer.js');

Usage:

@using Blazor.WaveSurfer
<div id="waveform"></div>

@code {
    WaveSurfer waveSurfer;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var options = new WaveSurferOptions { Container = "#waveform" /* your other options here */ }; 
            waveSurfer = await WaveSurfer.Create(options);
            await waveSurfer.LoadAsync("https://wavesurfer-js.org/example/split-channels/stereo.mp3");
        }
    }
}

Refer to the wavesurfer.js documentation for more information.