Web Audio API on Firefox about midi.js HOT 24 CLOSED

Fixed this today.

from midi.js.

Thanks Michael, it's great to have it. I just tested it.
I guess I'm a bit disappointed that the clicks and glitches with Audio Tag are still present with Web Audio for Firefox - I thought that would have been better. I still need to test on IE and see if the timing lag I noticed earlier this year is still there with the new Web Audio.

from midi.js.

I haven't had a chance to test on many devices (just the ones in my home), but no clicks/glitches on my Chrome Book or Mac (they're both pretty new though too 2013 + 2011). Others have also reported issues, so you're not alone. What system are you running on?

from midi.js.

I'm testing on my MacBook Air which I purchased Feb 2013.
I'm hearing a glitchy and click-like sound with the call to noteOff.
And I'm pretty sure this is the reason for that:
source.gain.linearRampToValueAtTime(1, delay);
source.gain.linearRampToValueAtTime(0, delay + 0.2);

I remember it was really bad

from midi.js.

Oops, I pressed the comment button prematurely.
This code is executed on Chrome (and Safari)?
But it's not executed on Firefox:
source.gain.linearRampToValueAtTime(1, delay);
source.gain.linearRampToValueAtTime(0, delay + 0.2);

That's the code that is responsible for gradually lowering the volume envelope so as to avoid a sound artifact.
Without that, we get the clickish sound on the note cutoff.
Anyway we can do something similar with the API for Firefox's Web Audio?

from midi.js.

Hmm... give the latest a try, I updated so linearRampToValueAtTime works with the updated WebAudioAPI. This is a great resource for updating from webkitAudioContext to AudioContext (btw) -- https://developer.mozilla.org/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext#Removal_of_AudioBufferSourceNode.gain

from midi.js.

Thanks! That's a lot better, but I can still hear a click on the call to noteOff for Firefox.
Works great on Chrome, the sound quality is lower on Safari (a better mp3 soundfont could help) yet acceptable.
On Firefox, I'm hearing less clicks than before but it's still there.

Here is the app I'm working on, I've integrated the latest MIDI.js changes. Listen closely at full volume to the end of the last note of the chord and you'll notice a click sound (and more clicks during the chord itself as earlier chord notes are being turned off). You may have to play it several times to hear it (it's not consistent).
http://learnmeasurebymeasure.com/chordear.php

from midi.js.

Maybe try playing around with the linearRampToValueAtTime values in Plugin.js? It probably just needs to tweaking.

As far as Safari, yes, better MP3 soundfont will make all the difference. The MP3 encoding is very bad. I haven't had time to improve that, but would be happy to accept pull requests on the matter.

Try: https://github.com/gleitz/midi-js-soundfonts
or generate yourself w/ NoteJS: https://github.com/SHMEDIALIMITED/SoundFontJS

from midi.js.

I tried playing around with these two lines, but sadly couldn't get it to work much better:
gain.linearRampToValueAtTime(gain.value, delay);
gain.linearRampToValueAtTime(-1, delay + 0.2);

0.27 (instead of 0.2) seems to be the best value, but the clicks are still there.
Sometimes I hear clicks at the attack of the note as well, especially when it's a number of notes together.

I'll see if I can make a generate a better MP3 soundfont later this week.

from midi.js.

Ok great, let me know how the higher res MP3 goes.

from midi.js.

I notice that the site at http://mudcu.be/midi-js/ uses an older version than what is currently in github. That site works great on my win8.1 desktop with Chrome, ie11, FF, and safari. I couldn't ask for better. However, when I download the latest at github, the same demo page only really works on Chrome, and the bad choppy sound is playing on the other browsers.

Why does the version .3.0 work fine, yet .3.2 has problems with other browsers?

from midi.js.

Hi @kusog, it seems the difference is the portion with linearRampToValueAtTime and triggering noteOff creating a clicking sound (the older version didn't trigger noteOff). I've toyed around with this by adding a double buffer (as well as easier multi-instrument support), you can see the latest on the dev branch: https://github.com/mudcube/MIDI.js/tree/dev

from midi.js.

I did get latest and notice that line 154 of plugin.js has an error calling self.getNext() when it needs to be self.next(). Did you check in all of your changes or did you test the change with IE and FF? Once I changed that code so it wouldn’t blowup, it still has the exact same problem when testing the demo-MIDIPlayer.html. Only Chrome plays properly with that. I’m still using the version I snagged off of the live demo site that works with all browsers.

from midi.js.

@kusog, when you use the demo, on the top where it says "Sound being generated with *" what is the technology being used? I'm noticing multiple issues, some subtler than others. I'm thinking that perhaps it's using audiotag? I've pushed an update which is more similar to the original where when using "audiotag" noteOff is disabled. The reason it sounded really bad is because there's no way to ease the audio to the off note when using Audio Tag–can't think of any way around that.

from midi.js.

It says:

Sound being generated with audiotag {"audio/mpeg":true}

I’m also starting to make some internal changes in order to make a list of the notes and when they will play so that I can setup animation before the event that tells me the note is playing now.

Out of the box, the only event generated is as the notes are being turned on and off, but I need to know about 5 seconds before the note is about to be played so I can start an animation with that note.

I also noticed in the version I have the BPM is fixed at 120, but I need that to be an option. I will be hooking up a dial UI widget to the BPM so that it can be adjusted dynamically. I am praying that I can set it up to change the song as it is playing.

I actually dislike how player.js wants to use window.setInterval for every event, ultimately creating many timers that have to be cleared. I think it must be better to setup a timer interval that is called every 10ms or so that looks at everything from BPM and its current play position to decide how to control the notes on and off. This would allow for things to change dynamically while the song is playing without having lots of messy timers to clean up.

from midi.js.

@kusog Good points. I would be interested in accepting your push changes for better solutions to the setInteval/setTimeout or updates to how BPM is handled.

Currently, for Color Piano, I'm just using the setTimout in scheduleTracking, not the setInterval in setAnimation (which just tells you where you are in the song). If you wanted to quickly make it send a message $x seconds before, you could hack into "scheduleTracking" function, and add an offset (messy). But, it sounds like you'd rather drop scheduleTracking/setAnimation, and setup a new function that uses requestAnimationFrame and scans for MIDI commands recently passed, this would be cool.

Currently the only easy way to change the speed of playback is via setting MIDI.Player.timeWarp, this should be changed to BPM at some point.

from midi.js.

You can see where I am going with this at http://kusogmusic.azurewebsites.net/Home/Contact. I have added support to modify the BPM rather than use timewarp. We need precise control over BPM, not just some general speed up/slow down. We also added a startup delay option, which is needed for the falling notes shown on the demo page.

from midi.js.

@kusog The app is looking great! I'm looking forwards to adding your BPM/startup delay updates. Also, let me know when you're launching your project and I'll add your to the demos page.

from midi.js.

Hey Michael!
If you want you're more then welcome to post my project on the demo page:
http://watchandrepeat.com/

MIDI.is rocks!!! My client said he tried to hire you (before he hired me) - I guess you must have too busy to take his project.

from midi.js.

@etayluz Hi Etay, Watch & Repeat is looking great! I'll be adding this to the demo page.

I especially like the right/left hands feature you added (it's on my TODOs), did that feature require much modification of MIDI.js to get working for you? I suppose you might of just used a multi-channel midi file, and then set left hand to channel#1 and right to channel#2?

The dev version also has various effects processing (for the WebAudioAPI version) that can be plugged into, which might be interesting to your client? i.e. Convolution, Reverb, and so on (via Tuna.js). I don't remember someone trying to hire me, so they must of slipped through the cracks; glad they found you for the job!

from midi.js.

Thanks a lot Michael! Wouldn't be able to do it without you leading this amazing open source project ;)

So instead of feeding a MIDI file, I have a utility that exports MIDI files to C arrays. Then I add the fingering manually to each note - so actually all on one channel. I'm only using noteOn and noteOff API's and I do all the scheduling myself - it gives me more control.

from midi.js.

@etayluz Ahh, that makes sense, thanks for sharing :) Btw, if you're interested in other jobs, much of the time my work load is too much, and would be happy to have someone to pass jobs that come by on to you (or anyone else who is comfortable w/ MIDI.js, please provide a demo). Connect w/ me via my contact form if you're interested MIDI.js work: http://mudcu.be/contact/

Since Firefox works now, and the thread is getting a bit off topic, I'm starting a new issue on the popping sounds that occur sometimes in firefox: #65

from midi.js.

Hello, just found a problem: with the new Google Chrome update, Version 36.0.1985.125 m, Midi.js does not work anymore:
file midi-js.js, line 448 var gainNode = ctx.createGainNode();
Uncaught TypeError: undefined is not a function

any idea? thank you very much

from midi.js.

I sorted out by using the dev version. thank you for creating this awesome library.

from midi.js.