Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/StefH/Howler.Blazor

A Blazor JSInterop wrapper for Howler.js.
https://github.com/StefH/Howler.Blazor

audio audio-player blazor howler html5 javascript jsinterop

Last synced: 10 days ago
JSON representation

A Blazor JSInterop wrapper for Howler.js.

Awesome Lists containing this project

README

        

# Howler.Blazor

A Blazor JSInterop wrapper for [Howler.js](https://howlerjs.com/).

[![NuGet: Howler.Blazor](https://buildstats.info/nuget/Howler.Blazor)](https://www.nuget.org/packages/Howler.Blazor)

### Live Demo
https://stefh.github.io/Howler.Blazor

### Usage

#### Install the NuGet

```
PM> Install-Package Howler.Blazor
```

#### Add the required dependency injections
``` diff
public void ConfigureServices(IServiceCollection services)
{
+ services.AddScoped();
+ services.AddScoped();
}
```

#### Add the required javascripts to _Host.cshtml
``` diff

+
+

```

#### Use the player
``` html
@page "/example"
@using Howler.Blazor.Components

@inject IHowl Howl
@inject IHowlGlobal HowlGlobal





TotalTime : @TotalTime

State : @State

Supported Codes : @SupportedCodes

@code {
protected TimeSpan TotalTime;
protected string State = "-";
protected string SupportedCodes;

protected override async Task OnInitializedAsync()
{
// Display all supported codecs
var codecs = await HowlGlobal.GetCodecs();
SupportedCodes = string.Join(", ", codecs);

// Register callbacks
Howl.OnPlay += e =>
{
State = "Playing";
TotalTime = e.TotalTime;

StateHasChanged();
};

Howl.OnStop += e =>
{
State = "Stopped";

StateHasChanged();
};

Howl.OnPause += e =>
{
State = "Paused";

StateHasChanged();
};
}

protected async Task Play()
{
await Howl.Play("https://www.healingfrequenciesmusic.com/wp-content/uploads/2015/03/Love-Abounds-Sample.mp3?_=1");
}

protected async Task Stop()
{
await Howl.Stop();
}

protected async Task Pause()
{
await Howl.Pause();
}
}
```

#### Example Page
![Blazor-WebDAV-AudioPlayer](https://raw.githubusercontent.com/StefH/WebDAV-AudioPlayer/master/resources/example.png "example")

#### Example project
See
- https://github.com/StefH/WebDAV-AudioPlayer/tree/master/src/Blazor-WebDAV-AudioPlayer.v2
- https://github.com/StefH/WebDAV-AudioPlayer#blazor-ui-screenshot