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: 10 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: 2022-10-16T07:51:40.000Z (about 2 years ago)
- Last Synced: 2024-04-14T13:08:17.947Z (7 months ago)
- Topics: audio, audio-player, blazor, howler, html5, javascript, jsinterop
- Language: C#
- Size: 18.2 MB
- Stars: 30
- Watchers: 7
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-blazor - Howler.Blazor - ![last commit](https://img.shields.io/github/last-commit/StefH/Howler.Blazor?style=flat-square&cacheSeconds=86400) A Blazor JSInterop wrapper for Howler.js, an audio library. (Libraries & Extensions / Tools & Utilities)
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