Page 1 of 2

HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 18, 2012 2:59 pm
by admin
Hello,

It might be possible to create a virtual organ in a web browser, with HTML5 / javascript / java ? I could be great ! :)

I suggest that we begin something very simple :

1 an HTML page with 10 buttons, each button being linked to a sound sample

2 if it works, then we can group these buttons in order to make a "keyboard look" (with black and white keys)

3 if it works, then we can see if MIDI input is possible in a "web browser" !

4 if all these things work, we can then see how to handle more than 1 rank (organ stop).

I'm not very good in web programming, are there some people willing to help ? ;) It could be a nice collaborative coding project !

Joseph

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 18, 2012 3:15 pm
by masi
Hi Joseph,

I would love to participate in this. But first I need a few days to finish another project.

Markus

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 18, 2012 7:36 pm
by admin
This is very encouraging :

http://mudcu.be/piano/

See you! Joseph

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Tue Jul 24, 2012 7:03 pm
by admin
Hi masi, you're welcome ! Feel free to contact me when you have some time. We can try the first step then : have an empty HTML5 page, with only 1 button and a .wav playback when button is pressed ! Do you know how to do this ?

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 25, 2012 12:51 pm
by masi
Hi Joseph,

it turns out that it is quite easy to play WAV files in the browser. Two lines of JavaScript code like

Code: Select all

var audio = new Audio(<path to WAV>);
audio.play();

do it. Try the test at http://infimum.de/JavaScriptOrganTest/index.html and look at its source code. There are two buttons. The first, when clicked, plays the complete WAV file. The second plays the file while it is pressed and stops when it is released. The latter button corresponds to a key of the organ.

The problem is that the play() method does not care about the loops, let alone does it play the release part when the key is released. Still we could use this method for a first implementation and later replace it by a more low-level handling of the sound data which allows better control. I am going the design a page with more buttons (note keys) and a stop selection.

Markus

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 25, 2012 3:52 pm
by admin
Hey Markus !

Waw this is great, it works fine with Chrome (but it doesn't with Firefox, I don't know why ?).

The problem is that the play() method does not care about the loops, let alone does it play the release part when the key is released. Still we could use this method for a first implementation and later replace it by a more low-level handling of the sound data which allows better control. I am going the design a page with more buttons (note keys) and a stop selection.

You're right, with Chrome, play() doesn't care about the loops... So sad... Do you have any idea for this ? If we cannot handle loop, I don't think it will be useful.
The final step would be to add MIDI input, and to be able to play from an external MIDI keyboard. Without loop, I don't know if it is still interesting for some users ?

What do you think ?

Joseph

PS : do you know Web Audio API : http://www.html5rocks.com/en/tutorials/webaudio/intro/ ? It seems interesting !

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Wed Jul 25, 2012 10:10 pm
by admin
If we want MIDI input (external keyboard support), the only solution seems to be JAVA !
http://abumarkub.net/abublog/

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Thu Jul 26, 2012 11:26 am
by masi
Hi Joseph,

there is now an upgraded version of my experiment at http://infimum.de/JavaScriptOrganTest/index.html. It has a selection of three stops and a single octave of note buttons. Furthermore there is a load status display at the bottom that shows which audio objects are initialized and have fired the canplaythrough event.

Browser behaviour is very inconsistent. Safari 5.1.7 pre-loads all WAV files and can play polyphonically (when several stops are selected). Firefox 8.0.1 on MacOS pre-loads only three of the files (Montre 8 F#, G, G#) and does not load the others at all. Strangely, these three files have the largest size. Safari on iPad does not pre-load any files, but it loads them when you try to play. Sadly, it plays only one audio object at any time, otherwise one could use the touch screen to play chords. Maybe Android allows this?

As you say, all this does not make much sense when the organ sounds cannot loop. Implementing this is significantly more work. Still it is an interesting topic, and I put it on my medium-priority todo list. The Web Audio API is certainly something to look at.

Markus

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Thu Jul 26, 2012 1:01 pm
by admin
Hi masi ! Nice work !

> Firefox 8.0.1 on MacOS pre-loads only three of the files (Montre 8 F#, G, G#) and does not
> load the others at all.
Exactly the same problem on Firefox for Windows ! Montre 8 F#, G, G# are the only files that are loaded.

I fully agree : it seems indeed that browser's behaviour is very inconsistent! :(

> The Web Audio API is certainly something to look at.
Yes but not supported for Firefox. Or maybe is it supported on the latest Firefox (maybe I don't have the latest) ? And on Safari ?
[EDIT : WebAudioAPI not supported on Firefox 14.0.1]

Do you think there is a technology that 1/ allows audio playback 2/ allows MIDI input 3/ works for ALL browsers ?
Java may be the answer? (how many people have Java virtual machine, in % ?)
Would Java work on iPad ?

I think our web app should work on iPad : a virtual organ on iPad, this is the future ! (Achim Leubner's Opus #1 is great!).

Re: HELP WANTED : "In-a-browser" virtual organ !

Posted: Thu Jul 26, 2012 6:16 pm
by masi
Hi Joseph,

Web Audio: With Firefox as well as with Safari I get "Web Audio API is not supported in this browser". But this might change in the future.

From a performance point of view, Java is certainly better than JavaScript, but it does not run on iOS. I think there are two application scenarios: a) Showcasing organ stops, which needs a low polyphony but should run on any system (in the browser) and not need any plugins. For this, HTML5/JavaScript should be used. b) Virtual organs, which need high polyphony and processing power. For this we have Java on Android and Objective-C on iOS.

By the way, a virtual organ on iPad is not the future, it is the presence, see http://itunes.com/app/StrandOrgan and http://itunes.com/app/OttOrgan. Stiehr-Mockers would be possible, too, if you like.

Markus