# wavesurfer-blazor-wrapper
**Repository Path**: codeox/wavesurfer-blazor-wrapper
## Basic Information
- **Project Name**: wavesurfer-blazor-wrapper
- **Description**: .NET6 Core wrapper around JS library: wavesurfer.js by katspaugh (https://wavesurfer-js.org/)
- **Primary Language**: C#
- **License**: BSD-3-Clause
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-03
- **Last Updated**: 2022-12-03
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# wavesurfer-blazor-wrapper
 
.NET6 Core wrapper around JS library: wavesurfer.js by **katspaugh** (https://wavesurfer-js.org/)
> Actual version of included wavesurfer.js: 6.3.0
## Installation
### Package
PackageManager
```
Install-Package WavesurferBlazorWrapper -Version 0.3.0
```
or .net CLI
```
dotnet add package WavesurferBlazorWrapper --version 0.3.0
```
### Javascript
Add JS to your layout section
```html
```
## Usage
### Basic
Add Blazor component to your page
```razor
@using WavesurferBlazorWrapper
```
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:
```razor
```
### Events
#### Main functionality
Every Wavesurfer event can be used via On... component parameter.
E.g. **seek** event via **OnSeek** parameter
```razor
@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.
> Original event and method documentation: https://wavesurfer-js.org/plugins/regions.html
#### Markers plugin
`OnMarkerClick` event is 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
```razor
@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 RegionAddRegion(WavesurferRegion regionData)`
> **DEPRECATED:** `Task RegionAddRegion(IEnumerable? regionOptions)`
`Task RegionClearRegions()`
`Task RegionEnableDragSelection(IEnumerable? regionOptions)`
Example:
```razor
//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?> RegionList()` - retreive all regions, replacement for direct access to JS list
`Task RegionListUpdate(IEnumerable regionList)` - send changed list back to JS
Example:
```razor
//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 MarkerAddMarker(WavesurferMarker markerData)`
`Task MarkerClearMarkers()`
Example:
```razor
//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"
});
```
> Original attributes documentation: https://wavesurfer-js.org/plugins/markers.html