Show HN: Babeloop, a new music sight-reading webapp | Hacker News Reader

Show HN: Babeloop, a new music sight-reading webapp

babeloop.com

12 pointsbambax12 comments

Backstory: I have a kid learning to play the clarinet in a music conservatory, which involves compulsory sight reading classes. Teaching for sight reading is done on books. The idea for this app is to port the method online, so that it's easier to practice and follow one's progress. It should also be more fun, and, for those so inclined, competitive.

The learning method is based on landmarks: for each clef one first learns the position of 2-3 landmarks, and then each note is in relation to a landmark. So for example, if you know where the middle G is on the treble clef, then you can learn fast that 2 positions up (next line) is B, and two positions down is E. (Anecdotally, in an earlier iteration of the app, landmark notes were displayed using specific colors; but users learned colors instead of the note position on the staff, and when they moved to a level without colors (or an actual score) they were completely lost.)

The app doesn't try to teach keyboard playing, or fingering for any other instrument for that matter. It only helps associate the position of a note on the staff with a name, in a given clef. It doesn't deal with octaves: a C3 is a C4 is a C; or accidentals: a sharp G is a flat G is a G. It also doesn't wait for user input, as other apps do. Music doesn't work that way; but more importantly, the point is to learn to recognize intervals instantly, not count them.

No account is necessary to use the app, only to participate in the leaderboard, and save one's score in case of device reset (or to use more than one device). When an account is created, the data is stored on the server in SQLite; I'm curious to see how far it can go. (Without an account, no data leaves the device.)

It's still a little rough around the edges but should work ok in reasonably recent browsers. On the client side, it uses VexFlow to display notes, staff and clefs, but animations are done using CSS transitions (not JS), to be mobile friendly. Tone.js helps provide a more accurate timing than a simple setInterval. Icons are coded in SVG by hand; for simple shapes, this is surprisingly fun and straightforward to do.

Open articleView on HN

Have you considered letting the user upload their own song?

I’m working on a WebMIDI based wait-for-input piano/keyboard app, like Flowkey, but bring your own music with MusicXML files.

Works amazingly well, using OpenSheetMusicDisplay lib for parsing MusicXML, rendering it to SVG (OSMD uses VexFlow under the covers) & using OSMD to map the music data into my own data model (I track everything I need for timing and visual x,y coordinates inside the SVG).

From there it’s pretty simple, just refactoring my hacky PoC I’ve been using for myself for the last year into something solid based on React + XState.

Anyways, OSMD would let you import arbitrary music as input to this, opening up the possibility of learning specific pieces

Yeah ok but MIDI files can be extremely complex, with different note lengths, timing, chords, etc. etc. It would be impossible to "play" on a web interface, only with a keyboard. And then it would just be Flowkey? -- or the app you are making...

That said, it's true that music is not random; learning to read actual music can be a plus over reading an arbitrary sequence of notes (although if you can read random notes fast, you probably also can read non-random music). It could also make sense for music teachers to upload a piece so that their students all work on the exact same music for example.

In that case the app could "flatten" any piece of music into a simple succession of quarter notes. It would not be very different from what it is today, though -- except less random. So, why not.

If you want to develop this, generate simple melodies and make a play along feature.

For the record: I am a professional musician (bassoon player in a symphony orchestra).

Sight reading doesn't really work quite like this when you get better. After a while your brain works more on chunks and patterns. For example, if I see a long scale pattern in F major I don't read very not. I just notice where to go up and down and play. Reading f e d e d c bb ... doesn't work for sight-reading such things in any meaningful tempo.

Having it play along meant you will have to continue even though you make mistakes. Mistakes will happen, and being able to regain ground and go on is important.

Well, that's complicated. You're talking about music theory. It's a fascinating topic, and not taught enough, or early enough, in conservatories (at least in my limited experience in France).

But, it's a different topic. Learning (western) music theory involves scales first and foremost. There are hundreds of scales; even if we limit ourselves to 1 major and 3 minor scales (a big limitation), that still leaves us with 12 x 4 = 48 scales. Then you have chord progressions, cadences, types of resolutions, time divisions... rhythm... everything else...

And none of that deals specifically with sight reading. In principle, you could learn music theory without ever knowing how to read music. IIRC, Paul McCartney, arguably one of the best song writers of all time, can't read music fluently (if at all).

I think it takes a very long time (a lifetime?) to actually learn music theory. But it can take from a few months to a couple of years of dedicated practice to learn to read music well. That's what I'm trying to do with this app.

Now, recognizing patterns, chords, chords in arpeggios, chord progressions would be a natural evolution, yes. For now, I don't know how to deal with any of that (esp. from a UI standpoint) but it's something that's on the radar, for sure.

What I meant was that sight reading has very little do do with knowing which note a note is. This is more about learning the basics of reading.

I practice 1-2 hours of scales and chords, tonguing and control every day. Being able to generate weird melodies to challenge all the combinations you have stored in your brain would be amgreat future development. The melodies don't even need to make sense.

One of my favourite etudes are the Deux etudes atonale by Boutry, and some of them are pretty much dice rolls on paper.

> Being able to generate weird melodies to challenge all the combinations you have stored in your brain (...) pretty much dice rolls on paper

Thanks for the follow-up! In your parent comment you were talking about scales and the fact that one is able to guess the next note if they know the scale.

Now random "dice roll" music may be a little easier to produce, and maybe not very far from what we have already.

Can you elaborate on what you would need, specifically? Chromatic random music (using all 12 notes, including accidentals), in the range of the bassoon?

And what do you mean by "play along"? Would you simply need the app to make some sound, or would you expect it to detect and analyze what the player does? (This would require MIDI, and in my experience, the few MIDI wind instruments that exist are unpopular with instrumentalists, to say the least.)

Or -- what about generating random sheet music (PDFs) on demand? That would be a great project, I would love to work on that.

A cool feature would be to take keyboard input. Either 'abcdefg' typed in or else one of those skeuomorphic layouts used by DAWs. Or else even better, if it supported webmidi so someone could plug in a midi keyboard.

I find the mouse clicking to kinda get in my way, though I see why this makes sense for mobile.

Another cool feature would be if it actually played the tone when pressed. Or chords.

But also super cool as is. I've always had trouble remembering bass cleft notes + I didn't even know all those other clefts even existed.

Thanks for the excellent suggestions!

Sound is in the works. It's a little complicated but it'll eventually work.

MIDI, IDK; I'd like to avoid this being another keyboard playing app. But maybe it's a natural development. We'll see.

But regarding keyboard support, that's a great idea. It would be so much more fluid than using the mouse when on desktop. On it!

This is so cool. I was actively looking for something just like this!

Thx!

Thank you for giving it a try!

This is great! Thanks for making and sharing it :)

Thanks!

Reply on news.ycombinator.com