fbpx
Skip to main content

MIDI Forum

Code for online vir...
 
Notifications
Clear all

Code for online virtual piano

13 Posts
4 Users
0 Reactions
25.6 K Views
Steve
Posts: 5
Active Member
Topic starter
 

I would like to to create an online virtual piano with no outside gear. Having much trouble even finding out how to make sound with no sound delay. I have found some that work online so I know it is possible so I would deeply appreciate any direction you could give. Thank you very much.

 
Posted : 27/02/2018 5:54 pm
Geoff
Posts: 1047
Noble Member
 

Well, on my understanding of this, it will NOT be possible to get zero delay.

You will have to decide what level of delay is acceptable, and try to work towards that.

The delay will be determined by the quality of your internet connection, by the setup of the computer (or whatever) you use to connect, the system (server) you are connecting to, and how the sounds are generated at the server end (the better the sounds/samples, the bigger the data to be sent back, and the more the delay).

As you say, there are such systems already available. Why are you wishing to compete with them? If you want better piano sounds, then your system will probably have more delay, unless you can improve elsewhere.

Of course, you may have better control for yourself using the system, but what about other users?

Geoff

 
Posted : 01/03/2018 9:56 am
Steve
Posts: 5
Active Member
Topic starter
 

https://mrcoles.com/piano/ The virtual piano at that page is the kind of sound/response time I am hoping to learn how to generate on my page. I used a virtual piano example in my original question just to simplify the question. I want to generate a quick responding sound on my page for creating games that rely on quick response.
I am a beginner coder and am wondering why that when I copy and put the source code for the piano page above into my online page, I only get the words (using both Chrome and Explorer browsers) and no piano. I am using Windows 8.1. Can you tell where the sound on the piano page above is being generated?
Thank you very much for your time.Any help would be appreciated. Thank you.

 
Posted : 02/03/2018 10:22 am
Geoff
Posts: 1047
Noble Member
 

Hello,

Thanks for the further information.

This virtual piano seems to be using JavaScript, as indicated on the keyboard graphic. JavaScript depends on a substantial Java module that needs to be on your computer already, nowadays JS is almost an accepted part of any browser as so much HTML will use JS, even if just for certain specific functions.

I would guess that JS will include some sound facility. Look up JavaScript and Sound.

While on the page with the keyboard showing, right-click on the page, and select 'View Source'. This will show you the HTML source for this page. The code includes a number of comments that you may find helpful. As well as other info, the comments refer to UDI (?) data modules that the writer is experimenting with. These may contain some of the data for the piano sounds?

Oh, also follow the links within the source to piano.js and audio.js, which will be subsidiary JS modules, which you may also find interesting?

I would need to investigate these things further, but why spoil your fun?

So, this page, because it uses JS, could well be generating some of the sound on your computer, maybe using some data downloaded. This will certainly explain how the delay with this piano is so much less than some other examples, although you do NOT indicate what you think of the sound quality compared to other systems (with longer delays).

Geoff

Oh, I see that you have already seen the source, but you say that when you try to use the source, you just get 'the words'? Which words? Do you mean the HTML code? Which has NOT been interpreted? If that is the case, then the code is not being used properly, and apache (or whatever) on the server is not getting the code correctly. I'd need to see EXACTLY how you've inserted this code into your prog.

 
Posted : 02/03/2018 12:50 pm
Steve
Posts: 5
Active Member
Topic starter
 

https://mrcoles.com/piano/ took down his server but maybe you could just comment on maybe why his source code didn't work when I just copied it and pasted it with nothing else, into my index.html file and uploaded. I have attached here an image of Chromes developer tool when I had my page up with https://mrcoles.com/piano/ source code in it-see all the exceptions in red on the right. Your comments would be helpful, but I think I need to spend more time studying exceptions, etc.
Also, I did the same as above to: http://virtual-piano.cute-apps.org/ and you can see from my 2nd attached image why it didn't work. Thank you again for your time.

 
Posted : 03/03/2018 11:39 am
Geoff
Posts: 1047
Noble Member
 

So, you have tried to run the main module, on another server?

BUT, the main module makes reference to a number of external modules, which it needs to load at the time of interpreting the main module. All the modules are referenced in the main page as being local, i.e. in the same location as the main module.

Either, you would need to copy all the missing modules to the same place as your code (incl the main page) is located, OR (I think) you might be able to include a full http//.... path to each of them instead of just the - say 'piano.js' - link so that your version of the code can find them.

I would recommend that you download all the missing modules just to be on the safe side. Note that some of the modules may in turn have links to other things, and so on.

Geoff

 
Posted : 03/03/2018 12:08 pm
Geoff
Posts: 1047
Noble Member
 

Just looked at your second attachment, and that shows that you've tried to provide a path, and that has not been liked, as the path gives does not match your 'home' path.

So, my second suggestion above will probably not work then. Maybe a security 'feature' in the system?

So, download all the required modules so they can be referenced locally.

Geoff

 
Posted : 03/03/2018 12:28 pm
Geoff
Posts: 1047
Noble Member
 

Steve,

I don't know if you've made changes?

If I access your web page (steveg.....net) I see that most (all ?) of the links now have full URLs there, they did not in the original.

Some differences (I've had a quick look ONLY), I see that the lines about 'audio.js' and 'piano'js' were on separate lines in the original, but are all run together in your page - this should not matter to the HTML, but if something has caused this change, what else has been messed up?

Also, just after this, there was a function() definition in the original (I suspect) but it seems not to be there on your web site - or is it just the above noted text displacement that has caused this too?

By the way, since the earlier messages, I've played with the piano system at Mr Coles while it was still working, and while playing the piano I could see that my computer was showing ZERO internet activity and zero HD activity, so all the playing/music processing was happening, as the text within the prog suggests, within the html/js/css, and I'm sure this has a massive effect on delays etc.

Geoff

 
Posted : 03/03/2018 2:33 pm
Bob Lee
Posts: 12
Active Member
 

This really has nothing to do with MIDI. I think that the Web Audio API has everything you need. See Introduction to Web Audio API.

 
Posted : 04/03/2018 9:40 am
Geoff
Posts: 1047
Noble Member
 

Yes, I'm afraid I must agree.

This thread has nothing to do with midi.

However, it is somewhat more interesting that numerous other threads here that have little or nothing to do with midi.

Maybe we can continue this via PM?

Geoff

 
Posted : 04/03/2018 9:58 am
Steve
Posts: 5
Active Member
Topic starter
 

This information has given some good direction for me to get further understanding (main modules, external modules, function() definition). From what you have written, Web Audio API appears to be the best approach for me. I just need a decent sound with little delay. It doesn't have to be midi.
With all the copying page/instruction example source code, pasting onto my index.html and uploading, I have yet to create any sound on my online page. Even when I copy and paste from https://css-tricks.com/introduction-web-audio-api/ . So I am missing some very elementary knowledge-probably the HTML5 basic document format. The way I learn best is to get the simplest functioning code and expand from there. Can you point me to or post any HTLM5 based (JavaScrpt should be fine?) basic sound creating source code (maybe with a start switch) that I can just copy and paste into my HTML5 index.html page and upload? I think that is the starting point I can work from. I am very happy with the help you have given.

 
Posted : 04/03/2018 2:09 pm
Geoff
Posts: 1047
Noble Member
 

Steve,

When you log in, near the top of the thread there should be a little bar including a little envelope, which should show 'Conversations'. There may now be a red marker there. This will indicate that you have a message separate from the forum thread. It should be a note from me If you wish, we could continue discussion via normal email, thereby avoiding complaints within the forum?

Thanks.

Geoff

 
Posted : 04/03/2018 2:37 pm
Sema
 Sema
Posts: 182
Reputable Member
 

You may like this one: https://github.com/jazz-soft/JZZ-input-Kbd

 
Posted : 13/03/2018 2:59 pm
Share: