Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 days ago
JSON representation
A Blazor JSInterop wrapper for Howler.js.
- Host: GitHub
- URL: https://github.com/stefh/howler.blazor
- Owner: StefH
- License: mit
- Created: 2020-01-08T18:54:40.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-09T21:22:47.000Z (4 months ago)
- Last Synced: 2024-10-29T20:32:32.707Z (14 days ago)
- Topics: audio, audio-player, blazor, howler, html5, javascript, jsinterop
- Language: C#
- Size: 18.2 MB
- Stars: 31
- Watchers: 7
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Howler.Blazor
A Blazor JSInterop wrapper for [Howler.js](https://howlerjs.com/).
[](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
#### 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