wavesurfer-blazor-wrapper

.NET6 Core wrapper around JS library: wavesurfer.js by katspaugh (https://wavesurfer-js.org/)

Actual version of included wavesurfer.js: 6.4.0

Installation

Package

PackageManager

Install-Package WavesurferBlazorWrapper -Version 0.4.0

or .net CLI

dotnet add package WavesurferBlazorWrapper --version 0.4.0

Javascript

Add JS to your layout section

<script src="_content/WavesurferBlazorWrapper/wavesurfer.min.js"></script>
<script src="_content/WavesurferBlazorWrapper/wavesurfer.minimap.min.js"></script>
<script src="_content/WavesurferBlazorWrapper/wavesurfer.regions.min.js"></script>
<script src="_content/WavesurferBlazorWrapper/wavesurfer.timeline.min.js"></script>
<script src="_content/WavesurferBlazorWrapper/wavesurfer.markers.min.js"></script>

Usage

Basic

Add Blazor component to your page

@using WavesurferBlazorWrapper

<WavesurferPlayer Url="youraudiofile.mp3"></WavesurferPlayer>

By default, player is shown with timeline and minimap plugins active, but without toolbar (so you can use controls of your own). If you want to use our basic out-of-the-box just enable it:

<WavesurferPlayer Url="youraudiofile.mp3" ShowDefaultToolbar="true"></WavesurferPlayer>

Events

Main functionality

Every Wavesurfer event can be used via On... component parameter.

E.g. seek event via OnSeek parameter

<WavesurferPlayer Url="youraudiofile.mp3" OnSeek="Seek" OnLoading="Loading"></WavesurferPlayer>

@code
{
    public void Seek(float seekPosition)
    {
        Console.WriteLine("Seek: " + seekPosition);
    }

    public void Loading(int percent)
    {
        Console.WriteLine("Loading: " + percent + "%");
    }
}

Original JS event list: https://wavesurfer-js.org/docs/events.html

Regions plugin

All events from Regions plugin with OnRegion... prefix are supported, returning WavesurferRegion object.

Original event and method documentation: https://wavesurfer-js.org/plugins/regions.html

Markers plugin

All events from Markers plugin with OnMarker... prefix are supported, returning WavesurferMarker object.

Original event and method documentation: https://wavesurfer-js.org/plugins/markers.html

Methods

For calling Wavesurfer methods you need to have ref to your component

<WavesurferPlayer @ref="_wavePlayer" Url="youraudiofile.mp3"></WavesurferPlayer>

<button @onclick="() => PlayPause()">Play / Pause</button>
  
@code
{
    WavesurferPlayer _wavePlayer;

    public async void PlayPause()
    {
        await _wavePlayer.PlayPause();
    }
}

Original JS method list: https://wavesurfer-js.org/docs/methods.html

Regions plugin

Original

Task<WavesurferRegion?> RegionAddRegion(WavesurferRegion regionData)

DEPRECATED: Task<WavesurferRegion?> RegionAddRegion(IEnumerable<WavesurferRegionOption>? regionOptions)

Task RegionClearRegions()

Task RegionEnableDragSelection(IEnumerable<WavesurferRegionOption>? regionOptions)

Task RegionPlay(string regionId)

Task RegionPlayLoop(string regionId)

Task RegionRemove(string regionId)

Example:

//add new region - actual non-deprecated way
await Player?.RegionAddRegion(
    new WavesurferRegion()
    {
        Start = 200,
        End = 280,
        Resize = true,
        Color = "rgba(10,200,25,0.3)"
    }
);

Wrapper specific

Task<IEnumerable<WavesurferRegion>?> RegionList() - retreive all regions, replacement for direct access to JS list

Task RegionListUpdate(IEnumerable<WavesurferRegion> regionList) - send changed list back to JS, removal can be done via RegionRemove method

Example:

//get list
var regions = await Player?.RegionList();

//make changes to one of regions
regions.First().Color = "rgba(100,0,0,0.5)";
regions.First().Start = 90;

//send changes back
await Player?.RegionListUpdate(regions);

Original attributes documentation: https://wavesurfer-js.org/plugins/regions.html

Markers plugin

Task<WavesurferMarker?> MarkerAddMarker(WavesurferMarker markerData)

Task MarkerClearMarkers()

Example:

//clear existing
await Player?.MarkerClearMarkers();

//add new marker
var marker = await Player?.MarkerAddMarker(new WavesurferMarker()
{
    Color = "rgba(10,20,200,0.8)",
    Label = "Test",
    Time = 250,
    Position = "top",
    Draggable = true
});

Original attributes documentation: https://wavesurfer-js.org/plugins/markers.html