This is a simple MIDI piano component for Blazor.
It will use the Web MIDI API in the future.
Currently it run on a custom notation format and mp3 samples.
Initial idea and code from @dominikz98
-
Add a project reference to
MIDIPiano
in your Blazor project. -
Add the following to your
index.html
file:
<script src="_content/MIDIPiano/scripts/audio.js"></script>
- Add the following to your
_Imports.razor
file:
@using MIDIPiano
@using MIDIPiano.Components
- Add the following to your razor page view:
<Piano @ref="Piano" />
- Add the following to your razor page code:
using MIDIPiano;
using MIDIPiano.Components;
public partial class MyRazorPage
{
Piano Piano { get; set; }
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
// this is just to demonstrate the usage of the component
Piano.Song = MusicSheets.FadedByAlanWalker.MapToVm();
Piano.Play();
}
}
}