Thanks a lot!

<embed> is exactly what I need for presenting search results where the matching bit is deeply buried inside a large MIDI file. With this tag, I should be able to easily tell the browser to play exactly the part of the file that matches, thereby making it easy for the user to determine whether the file is what he is looking for. And thanks to the possibility of including controls, the user could decide whether something is played at all, when, and what matches are played.

The data URIs are pretty cool, too. But I think they don't solve the problem I have in mind: I would like the Java keyboard to make a sound when a key is pressed, just to quickly and immediately tell the user what pitch that key has. Of course, this should happen without an annoying popup or a visible embedded player.

I was thinking about using <bgsound> since that's the only tag that just plays something without popup or user interaction. When a key is pressed, the keyboard would have to dynamically create a BGSOUND tag that causes the browser to play a short note corresponding to the key exactly once, without looping. The MIDI file containing that note could even reside on my server, it would not have to be a data URI. Is this a bad idea for reasons other than that only IE supports bgsound?

The "not one file per note" requirement for playing the entered melody is already addressed with a server-side play script that is called when you hit the play button. This should work with all browsers.

Sorry about still having "replace" in the code - I could not get it to work even with escaped quotes. But I cut down a bit on the number of calls to the replace function.

Rainer

: I am aware of the possibility of playing MIDI files from Javascript, but I would not like to play one file per note.

i've thought about this some more. how about trying the data uri scheme:
http://en.wikipedia.org/wiki/Data:_URL

ian hickson's script will automatically convert some test files for you:
http://software.hixie.ch/utilities/cgi/data/data

i tried it on the midi file of bwv 1079 -- MPYiugH5.mid (478 bytes). after a roughly 33% size increase, this converts to 694 bytes:

data:audio/midi;base64,TVRoZAAAAAYAAQACAYBNVHJrAAAA8wD%2FATJDcmVhdG9yOiBHTlUgTGlseVBvbmQgMS40LjEyICAgICAgICAgICAgICAgICAgICAgCgD%2FAXhHZW5lcmF0ZWQgYXV0b21hdGljYWxseSBieTogR05VIExpbHlQb25kIDEuNC4xMiAgICAgICAgICAgICAgICAgICAgICwgYXQgV2VkIEF1ZyAgNCAxNjoyOTo0NiAyMDA0ICAgICAgICAgICAgICAgICAgICAgICAA%2FwEuZnJvbSBtdXNpY2FsIGRlZmluaXRpb246IC90bXAvZmlsZWU5VGJoVDoyOjIyNgD%2FAwdUcmFjayAwAP8vAE1UcmsAAADNAP8DAAD%2FUQMMtzUA%2FwQPYnJpZ2h0IGFjb3VzdGljAMABAP9YBAQCEggA%2F1kC%2FQEAkEh%2FhgCASEAAkEt%2FhgCAS0AAkE9%2FhgCAT0AAkFB%2FhgCAUEAAkEd%2FhgCAR0CDAJBPf4MAgE9AAJBOf4YAgE5AAJBNf4YAgE1AAJBMf4YAgExAAJBLf4kAgEtAAJBKf4MAgEpAAJBJf4MAgElAAJBIf4MAgEhAAJBHf4MAgEdAAJBFf4FAgEVAAJBDf4FAgENAAJBIf4MAgEhAAP8vAA%3D%3D

which you can plonk as the target of links (<a href=") or try embedding with: <embed src="data:audio/midi;...

(<embed> looks like it's on track for inclusion in html5, otherwise see how well <object> works for you.)

for the keyboard you'd still have to discover how to join the (data:uri encoded) midi files as the melody is lengthened. a more simple approach might be to trigger the melody notes from a javascript timer. (then you'd just have to have a complete set of data:uri encoded midi notes for the keyboard range.)

another complication is that micorosoft internet explorer (as of version 6) does not support data uris. dean edwards compliance patch may fix this:

http://dean.edwards.name/IE7/intro/
http://dean.edwards.name/IE7/compatibility/img-base64.html

i don't have microsoft windows so i can't test this for you.

hope that helps,

- p

*shudders* Please stick with Java. :-)

Excellent, thank you very much! I'll do what you suggested.
No, escaping was not a problem, just my lack of Javascript knowledge. I wrote these functions just based on some googling and reading snippets of online tutorials.

: The replacements are mainly there to overcome the problem that Lilypond uses apostrophes in note names

was escaping the nested quote causing other problems? using onclick="AN('cis\'8')" works; it's only 1 extra character per onclick and you save 4 expensive regular expression calls to String.replace().


: innerHTML/DOM: What would be the best way of doing this? What is the problem with innerHTML?

David Flanagan, _JavaScript, the Definitive Guide_, 4th edition (highly recommended!), page 294:

"Although this property (innerHTML) is not part of the DOM API, it is a useful shortcut that is supported by Internet Explorer 4 and later and Netscape 6. Although it is not standard, it is in common use..."

"The innerHTML property is particularly useful when you want to insert large or complex chunks of HTML text into a document. For simple fragments of HTML, using DOM methods is more efficient because no HTML parser is required. Note that appending bits of text to the innerHTML property with the += operator is usually not efficient."

i'd rewrite your functions to pass a node. for example:
---8<---
function gr(node, oldarr)
{
var anchor = document.createElement("a");
var image = document.createElement("img");

anchor.setAttribute("href", "#");
anchor.setAttribute("onclick", "rs('" + oldarr + "')");

image.setAttribute("src", "http://www.musipedia.org/med/dl.gif");
image.setAttribute("border", "0");

node.appendChild(anchor);
node.appendChild(image);
}
--->8---

although innerHTML appears to be on standards track for possible inclusion in the next DOM API, also bear in mind it's impact on accessibility: http://www.w3.org/TR/WCAG20-SCRIPT-TECHS/#doc-write

- p

The Play button will still be there in the Java version (which also plays notes while you press keys, which makes note entry easier). In the Javascript version, I am not sure how I could get a similar effect on the client side. I am aware of the possibility of playing MIDI files from Javascript, but I would not like to play one file per note. Maybe I need to learn Flash.

However, in both cases (Java and Javascript) the query will be made available as both sheet music and a MIDI file after pressing the Search button. On the server, I am going to run Lilypond on the query and deliver these two things before starting the actual search. That way, it will be possible to listen to the query even with the Javascript version (although not without searching at the same time).

Did the Play button go away? Am I missing something?
No bass octave is ok. I was just being picky earlier. Most melodies are in treble cleff, for sopranos and guitar alike.

Hi Paul,

thank you very much for your excellent ideas!

Rests: I am planning to add them to the map, maybe on the right side of the keyboard.

Icon: Okay, will increase its size. Was also thinking about a simple arrow to the left, similar to the backspace key on a keyboard.

Javascript: I am not too familiar with it, so I would be grateful if you could tell me better ways of solving these problems.
- The replacements are mainly there to overcome the problem that Lilypond uses apostrophes in note names, but it is really hard to work with strings containing apostrophes in Javascript, where a double quotation mark is already used for containing the Javascript code and single apostrophes are already used for delimiting strings. So I use another character (y) in the onClick function calls and turn it into an apostrophe in the last moment before it appears on the screen.
- innerHTML/DOM: I don't know this stuff well enough. I briefly experimented with a DOM function for changing text and noticed that the text is then just displayed instead of being interpreted as HTML. What would be the best way of doing this? What is the problem with innerHTML?
- Cycling through note duration lengths while the mouse is pressed is a wonderful idea, but I have no clue how to do it. Can you point me to an example of code that cycles through bitmaps while the mouse is pressed? This would solve the problem that right now, the keyboard does not look very nice, and at the same time there are only very few note durations offered.
- Drag and Drop: Is that really nicer to work with? The keyboard requires just one click per note at a position that is intuitively clear (everybody knows how a piano keyboard works). Wouldn't Drag and Drop require more familiarity with music notation (right now, the music is just an illustration, but it is not required for the user to understand it) and more complicated mouse movements?

hi rainer,

(i just found your site. i've been looking for it since 1994 when I first read about parsons code.)

the client side input idea is wonderful. are rests only handled via lilypond notation? the delete/trash can icon is really tiny, and i think the stave & notes appear rather small too.

about the javascript: what are all those string replacements for? -- regex handling is expensive. also consider using w3 dom methods rather than innerHTML.

what it's intended audience? people with basic musical literacy? how about cycling through note duration lengths while the mouse is depressed on a note until the desired duration is displayed? a natural mapping if you start with shorter rhythms and progress to longer while depressed.

how about a drag-n-drop interface with a toolbar? overkill?

- p

There is now a Javascript version of the keyboard (sorry, but middle C is now not in the middle anymore, for historical reasons that have something to do with the little bitmaps showing notes).

To take a look, click on the "melody editor" link near the bottom of this page, or go here:
http://www.musipedia.org/med/meledit.html

Feedback would be welcome.

I am planning on putting this on the front page and the search pages. Because it's Javascript, the annoying problems with Java applets (delay when it's loaded, pop-up about the signature, incompatibilities with some browsers) won't get in the way of entering a melody as query.