PG Music Home Forums General Discussion Off-Topic SATB Writing Assistant

I recently had need for a (preferably web-based) program to help teach the basics of Chorale/SATB writing. I couldn't really find anything in the cheap/free category. HarmonyBuilder looked cool, but wasn't web-based, and cost Real Money™.

Being a programmer, I naturally figured "How hard can it be to code this myself?". To keep things simple, I limited the program to 4 bars of quarter notes with no accidentals.

(Internally, the code actually deals with the full chromatic system, but the UI for working with accidentals and scrolling adds a lot of complexity, so I haven't done it... yet.)

It's written in HTML 5, and I've targeted Firefox. The code won't work in IE, and not all the features work in Chrome. I don't have a web server, so it's all static code. That made things like "File Save" particularly interesting to implement (the HTML 5 file system is essentially useless at this point).

This is all alpha software, guaranteed to be buggy. It won't crash your machine (it doesn't do anything malicious), but if you try the audio playback in Firefox, it's likely as not to kill the session. As Wonka says, 'Little surprises around every corner, but nothing dangerous."

If all this hasn't scared you off, check it out: http://webs.lanset.com/dcuny/satb/satb.html

Even if you don't like part writing, it's sort of cool to try stringing together chords. One wrong move, and a spiderweb of errors appear, pointing out parallel fifths and octaves, similar motions and unprepared 7ths. It's cool shifting stuff around and seeing what happens.

Hrm... I should probably include some hints on using it.

When the page initially loads, if the music doesn't initially render, just click on it and it'll appear.

(Before you tell me - yes, I need to attach a callback to the load event.)

You can click on notes and drag them up and down. Click on the following beat to add another chord. If you want to hear a chord, press the 'P' key. (Don't be surprised if your browser disappears!).

The Save File feature is a real hack. For your safety, JavaScript can't write to your hard drive. So clicking the Save File button causes a link to be displayed that's got the saved version of the music in it. To prevent the browser from opening the text file in another tab when you click it, it's Base64 encoded. So you'll (hopefully) be given a dialog to save the file. You'll want to rename the file, since there doesn't seem to be a way to overwrite the default name the the browser gives it (derived from the Base64 encoding - bleah!)

The "wizard" comes from the ClippyJS library. I still haven't figured out how to make it work the way I want... Yes, "Clippy" is an option, and he's really just as irritating as you remember. If you need, you can click and drag him to another location on the screen.

Also, take the error with a grain of salt. Just because I've implemented a bunch of rules doesn't mean they've been implemented correctly.

Let me know what you think!

Hi David.

It works just fine in Chrome, except for playing the current chord. For some reason this isn't working on my machine.

Great program! Any plans to make it play the chord sequence?

Thanks for posting.

ROG.

Hrm... Other than audio and key alphanumeric key handling, it looks like it runs in Opera as well.

Things look really broken in IE - Clippy doesn't even show up. I see there is a canvas tag emulation layer that I could in theory use, but really I've just been focused on a single platform. There's so much that's not well supported in JavaScript (at least, for static applications) that it's all a big hack anyway.

I don't want to get too carried away with this project. I just plan to add enough features to make it "useful enough", and try to be happy with that. (Famous last words!)

Hi, Eddie.

I'm not sure how your solution gets me any closer to meeting my needs.

I'm a computer programmer who's volunteered to teach a class on music theory to a handful of teenagers. I have no budget, and we meet once a month for one hour.

When I asked them what they wanted to learn about, they said they wanted to get right to the fundamentals of SATB-style writing. You know - that pedantic 4-part style that they teach you in Music Theory 101, because everyone likes to spend their spare time writing chorales.

One hour is dreadfully short amount of time, especially when I want to make sure people understand the fundamentals. By the time I've explained basic stuff like why similar motion is bad if you're trying to create independent melodic lines, class is already over.

They're chomping at the bit, taking home my copies of Jeppenson's Counterpoint: The Polyphonic Vocal Style of the Sixteenth Century and Kennan's Counterpoint Based on Eighteenth-Century Practice. (I'll confess not making my way through either completely, although I've made a number of valiant attempts).

While they're certainly motivated, I'm not entirely sure their about their comprehension level.

It got me thinking about what I wished I had when I was taking Music Theory 101 in college:



Does this look like Finale to you?

Only if you know how to use Finale......

I thought you were a staff teacher at a university or something and would have an expense account to charge.

The main point to using software is that when you have rests like your example shows, every rest looks the same. Also for accuracy in placing events. However, it would take a lot of time playing every measure in 4 times for all 4 voices, and I wonder if it would even be faster than running through it longhand.

When I chart for myself anymore, it is close to my own shorthand rather than traditional music. It's just too much like work to do notation. I will get a guitar tab, write the changes onto staff paper, and then hand write notes like "cres G - G decres", and it's not hard to break the code that I mean "volume swell a G and then fade it".

But formal notation? Nope. Not any more. I'm not going to quit my job to write dots on staff paper all day, so I feel your pain.

Hi, Eddie.

I think you're missing the point of the program.

This isn't a program for doing charting, it's a program to help learn the fundamentals of SATB chorale writing. That's why it's limited to quarter notes. The rests look the same because they're just placeholders for beats that don't yet hold notes.

Did you try clicking the link and playing with the program? It's JavaScript that runs in a non-IE web browser, so there's nothing to install.

I did not click.

What I meant about the rests looking the same is that is you draw 1/4 note rests by hand, some look like a rest and some look like a drunken stick figure.

I still don't even know for sure what you are teaching, and that's okay because it's already given me a headache. Fundamentals, by definition, are concepts. Written music is just those thoughts transcribed into an end product, so I am lost. Many years removed from college music classes..... like 40.

Hi David,

http://webs.lanset.com/dcuny/satb/satb.html

That's a really cool program. Worked well on Firefox. Keep improving it!

This is a very nice first cut. Good job. As ROG mentioned, it would be nice to hear the sequence, and even export to MIDI.

How about an option to distinguish informational messages from rule breakers?

How do you do a sharp or flat?

Thanks for the feedback!

The program is "stand alone", in the sense that you could run it from your desktop (which is where I'm developing it). So not having a web server is actually a feature. Java would have been the better choice, but I wanted to get some more experience in JavaScript.

As far as accidentals go, you can't currently display them - the UI isn't set up to do that. I'll get around to it, but there are a lot of UI and infrastructure changes that need to be done first.

I don't know about MIDI support - it's not really high on the priority list. If I found a library that did it easily, I'd add it in. As it is, I might create simple MusicXML output.

But I think the fundamental design limitation of quarter notes only will not be going away, which limits the utility for creating "real" music, but doesn't really impact it much as far as a training tool.

Just to let you know that it works in Chrome running on Linux Ubuntu.

Thanks! It also works under Ubuntu with Firefox.

The suggestion to differentiate between severity of errors is a good one. I'll look and see if there's some way to color code them. It wouldn't be difficult to add a switch to toggle between 'warnings', 'errors' and 'all' once that was implemented.

Looks pretty cool dcuny. Works in FF here. Half works in IE9 if in IE9 document mode. It defaults to quirk mode for some reason, but changing it to IE9 document mode makes it look a little better (via developer tools).
Quirks mode doesn't let Bonzi load, but IE9 doc mode does. IE8 and 7 doc mode doesn't.
Didn't know if that would be helpful. I'm guessing IE10 will probably run it fine. I hear there will be a lot of improvement. Programmers at work are kind of excited to see it coming out. Hopefully it works as planned and people update to 10.

Thanks for the feedback!

Microsoft is also working on a version of JavaScript called TypeScript, which has type inference based on assignment, as well as type declarations. It makes using an IDE much more pleasant when it can "intellisense" the class and show you a list of methods.

I found a JavaScript library called cufon which can convert TrueType fonts into data structures and render them, which means I should be able to replace the static bitmaps I'm using to render notational graphics with vector graphics. It means a rewrite of that portion of the code, but I'll end up with something a lot more flexible. For example, I'll be able to dynamically set the color of items, or change the scaling on the fly. I'll probably use the Gonville font from LilyPond, since it's licensed for that. I've started

It probably won't change the functionality much, but it should make the coding more pleasant, since I'll be able to ask the toolkit for the metrics of glyphs, instead of doing in manually.