search

cifkao / html-midi-player

🎹 Play and display MIDI files on the web
https://cifkao.github.io/html-midi-player/
BSD 2-Clause "Simplified" License
683 stars 62 forks source link

Loading Bar #29

Closed ireneyrzd closed 3 years ago

ireneyrzd commented 3 years ago

Is it possible to add a loading bar that shows up when the audio and piano animation is being downloaded and generated?

cifkao commented 3 years ago

Yes, this would be useful. I don't know how to show a progress bar, but at least some kind of shimmer effect, as discussed in #10, would be nice.

cifkao commented 3 years ago

I implemented an initial version of the shimmer effect on the loading branch. I still need to add a way to distinguish between loading state and error state.

shimmer

majorcyto commented 3 years ago

@cifkao - Just saw you put a pre-release test up! Looking forward to this as well as that is one of the main feedback notes I have received is that users are unsure sometimes if it is still loading notes in the background or not. (That and the scroll bar not resetting when replaying something). When the actual release goes on the CDN jsdelivr I will test it and gather feedback.

I have been working on implementing this project into my existing site and have made some good progress, you can see a demo here and here.

I have made a custom Soundfont so the note file sizes are a bit bigger than default so this will be a big help for me from a UI/UX Perspective!

(Now if only we could get Magenta to fix the pitch 89 / 90 issue lol).

cifkao commented 3 years ago

@majorcyto I just published a new one.

I have been working on implementing this project into my existing site and have made some good progress, you can see a demo here and here.

Looks great! You should be able to customize the shimmer effect to your liking via midi-player::part(loading-overlay).

cifkao commented 3 years ago

@majorcyto Actually I just pushed it as 1.4.0-0 1.4.0-1 on NPM/jsdelivr.

majorcyto commented 3 years ago

Hey @cifkao - Thanks for the direct mention! I have updated my website to the new version and the shimmer loading effect works great! I even tested it by 'throttling' my connection through Chrome tools down to like 1mb/s and it worked as expected!

I haven't customized the colors of it yet (I might not need to, it works with my color scheme ok) but if I do decide to then thank you for including the CSS Selector. 😁

cifkao commented 3 years ago

Released in v1.4.0.