sightread / sightread Goto Github PK
View Code? Open in Web Editor NEW๐น Learn to play piano
Home Page: https://sightread.dev
License: GNU General Public License v3.0
๐น Learn to play piano
Home Page: https://sightread.dev
License: GNU General Public License v3.0
many pianos have a function to transpose +-12 but sightread crashes when rendering a midi note from outside the normal range:
seems to happen because it tries to access a non-existent lane.
sightread/src/features/SongVisualization/falling-notes.ts
Lines 231 to 233 in 55089cb
Hi there ๐
Beautiful library. Super cool.
I just noticed that the atomEffect is not mounted, so it won't run.
sightread/src/app/training/Phrases/page.tsx
Lines 70 to 75 in f67e10e
You can make it run by defining the atomEffect in global scope just like you would an atom and passing to useAtom. atomEffects are atoms after all.
Have a nice day.
summary
Currently Sightread has no Continuous Integration or Automated Tests.
Would be great to at least add a CI check with lint.
I think it would be great to add support of MIDI Windsynths like https://a.co/d/8qZJhoA (I have this one).
E.g, UI for Sax could look like one from Saxplained videos:
I tried to connect my windsynth to sightread and it works, just needs a different UI. When I'll have a free time, will try to add it myself.
Kinda related to #108
This app is very cool, and it would be nice to also support e-drum. What are you thoughts on it?
Requested via reddit comment
A button to start recording audio and save in a mp3 file.
summary
Browsers shouldn't need to download the soundfont every time it loads Sightread.
Same is true for MIDIs.
They should all have their cache headers set s.t. they can be cached for...at least a week.
summary
When using Sightread on an iOS device in any visualization that includes the <canvas>
based Virtual Piano, touch events don't seem to trigger any piano key presses.
Context #104
HI, I really appreciate your work but it is pratically impossible to play on smartphone even with max zoom out and desktop mode.
Is there a way to make it better?
Songs can't be played fully
Examples:
https://file.io/IYnWhQYRLoDo
https://file.io/XUQJmXGdb9Cd
summary
Numerous folks have reached out over email requesting the ability to install Sightread to use it while offline. This includes:
The "Sheet hero" visualization looks like a great approach to familiarize beginners with sheet reading.
However, its current version is completely black (as normal sheet music :) with small letters to show the notes. So, it is kind of unappealing and still hard to read and associate notes with keys.
I would like to use it to introduce my toddlers to sheet music.
They currently have a toy piano that includes sheet music. Each note in the sheet is coded in a different color and each key in the piano has the same color, so it is easy for them to read the sheet and play the song.
It would be great if there was an option to enabled "Color notes" in "Sheet hero", so that each note is shown in a different color. That way, they would be easier to identify and learn and more appealing for children. Eventually, the would be prepared to move to the pure black sheet.
Example (time 00:27-00:28):
https://file.io/0SPtMawqws1v
we already have horizontal lines for measure numbers.
we can also add them for beats.
Hello, I've wanted to make an app like this one, so I'd like to contribute. #64 seems a good feature.
summary
Some systems for teaching kids involve color coding notes on the staff instead of having them all be black. We can pretty easily add a new toggle in the SettingsPanel
for enabling this. This should help folks learn to read notes faster, especially when the notes are on ledger lines.
summary
For folks with a library of 100+ MIDI files, manually uploaded each one is way too much effort. We can use the Filesystem access API for syncing entire folders.
summary
As of #113, we can make midi recordings in Free Play mode.
The only available options are Download MIDI, and copy as url.
This issue is about introducing a third option - download as MP3.
The ideal implementation will somehow go from the midi Uint8Array to sound bytes, without using Media Stream Record API
context
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
@types/bun
, @types/node
, @types/react
, @types/webmidi
, clsx
, eslint
, eslint-config-next
, fluent-ffmpeg
, jotai
, jsdom
, next
, prettier
, prettier-plugin-tailwindcss
, react
, react-dom
, sharp
, tailwind-merge
, tailwindcss
, typescript
)package.json
@radix-ui/react-slider 1.1.2
@radix-ui/react-tooltip 1.0.7
@tonejs/midi 2.0.28
clsx 2.1.0
jotai 2.7.2
jotai-effect 1.0.0
next 14.1.4
react 18.2.0
react-dom 18.2.0
react-feather 2.0.10
tailwind-merge 2.2.2
@ianvs/prettier-plugin-sort-imports 4.2.1
@types/bun 1.0.12
@types/fluent-ffmpeg 2.1.24
@types/jest 29.5.12
@types/node 20.12.5
@types/prettier 3.0.0
@types/react 18.2.74
@types/resize-observer-browser 0.1.11
@types/webmidi 2.0.10
autoprefixer 10.4.19
eslint-config-next 14.1.4
eslint 8.56.0
fluent-ffmpeg 2.1.2
jsdom 24.0.0
postcss 8.4.38
prettier-plugin-tailwindcss 0.5.13
prettier 3.2.5
sharp 0.33.3
skia-canvas 1.0.1
swr 2.2.5
tailwindcss 3.4.3
ts-node 10.9.2
tsconfig-paths 4.2.0
typescript 5.4.4
.github/workflows/validate.yml
actions/checkout v4
oven-sh/setup-bun v1
It would be good to have an optional countdown before the start of a song to give users time to get ready.
Hi, I was wondering what is the license for the sightread?
The description says it's open-source, but the package.json has a private: true
.
summary
I have been personally upgrading Sightread's dependencies once in a blue moon.
We should automate the process with something like Renovate Bot. Ideally configured to create a monthly PR upgrading everything.
It's great if our software I can have dual voice like most of Casio Piano, so for each press, we can have both sound together like piano with synth.
Error message shown is :
Unexpected chunk, expected MTrk, got Sequ
I often use the wait mode to learn some midi files I made of the Hanon exercises. I found that if I have two notes in a row and I accidentally play the second note first, it will show this as wrong, but when I play the correct note, it will play the first note and the second note again without me having played the second note a second time.
For example, if the notes are A, then B. If I play B first, it responds correctly and doesn't accept the note. Then, when I play B I hear the notes A played and then immediately hear B even though I didn't play B.
As a workaround, if I modify the code to set good_range and perfect_range to zero, it seems to fix the problem.
File:
src/features/player/index.ts
New values:
const GOOD_RANGE = 0
const PERFECT_RANGE = 0
Also, I love this project. It has already been amazingly helpful for me.
summary
Learning piano is difficult. I think if you were able to learn on advanced music that sounds fun vs. Twinkle Twinkle Little Star, as well as create a more gradual difficulty curve, the experience would be much more fun.
The idea is that instead of only hearing the notes being played on screen, what if we had a difficulty toggle that could drastically reduce the difficulty of a song. You'd then play the easier notes, but still hear the full song (similar to Guitar Hero & Rock Band). Over time you could then increase the difficulty setting until you are playing 100% of the notes.
summary
When using wireless headphones, there is a noticeable delay between notes being played in th UI and hearing the notes in your headphones. We can probably mitigate it by using AudioContext.outputLatency to offset the visual and audio timings.
This will need to be handled in some mixture of the midi
utils and Player
class.
summary
In order to take full advantage of sightread, one needs a MIDI-compatible keyboard.
It would be great if SR were also compatible with acoustic instruments.
This would require using a mic and converting the raw audio to MIDI notes, which is an incredibly challenging problem.
Our best bet would likely be to use an off the shelf solution.
For example, project Magenta's Onsets and Frames JS API. It seems accurate, but we'll have to see about latency.
Example:
https://file.io/XUQJmXGdb9Cd
I'll try to contribute with this issue next in my free time, but I can't say that it will be fast
summary
Taking inspiration from sightreading.training, we should create a mode with infinite notes for practicing reading the staff.
First of all, I know this is quite a hard request being a dev myself (I code on TS too, maybe I could help somehow?) and very out of scope, but also an interesting thought could be made on the long term as there's nothing else like this out there:
As I read you're planning on implementing being able to play local files, what about trying an implementation of MIDI files synced with mp3 files? Kind of what Guitar Hero already before, taking MIDI for the charts and mp3 for the actual music. Keyboard Hero at its fullest.
I get this has some kind of implications that must be studied:
Sorry for the verbosity, maybe I'm just building castles in the sky but I thought it could be interesting. What's your thought on this?
The default piano soundfonts are ugly imo ๐
We can add these ones
https://www.youtube.com/watch?v=DR1W0VIPiPo
summary
The builtin catalog in Sightread is pretty small.
It would be great to expand it for all difficulty levels.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.