Git Product home page Git Product logo

Comments (24)

kusog avatar kusog commented on August 16, 2024

Watch out for browser caching of the soundfront files. I've seen it hold on to them even when doing a hard refresh.

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

@kusog I don't think its the browser caching - the website and the old demos play fine in different tabs of the same window when invoked together.

I have also tried it on 2 different machines and found that the latest demos don't play.

Thanks,
Shantanu

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

Hi @Morpheus0Neo, I'm not entirely sure what's going on, but here's an idea. It's possible the original midi.js didn't use XHR requests, in which case that'd mean it could be run from the local filesystem. The live version currently must be run on a server (be that localhost, or a website).

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

yup - @mudcube - that was the reason the demos were not working. When I debug it through visual studio the temporary web server serves the files and the MIDIPlayer works.

But I wonder why it has been changed to this behavior. If I understand it correctly, a application will now need an active internet connection and have to connect to the server to download the sounfonts from the hosted location so that the app is functional. Also, it wont be possible to develop a plain client side app without a server.

If this is true, does it mean that I cannot use and deploy the library with the soundfonts in a packaged app that cannot connect to the internet? If it is possible, how can I do that?

Thanks for the help @mudcube.

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

Also, can I package more soundfonts other than the default ones?

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

@Morpheus0Neo, good call. It's not hard to do, but noticed it's broken in latest branch, so pushed a new copy on the dev branch: https://github.com/mudcube/MIDI.js/tree/dev

As far as playing from file:// (which is what your'e asking), it's not hard, just include the soundfont into the HTML under... e.g. if you wanna include the piano and load from file:// use this:

<script src="./soundfont/acoustic_grand_piano-ogg.js"></script>

Let me know how it goes.

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

@mudcube I dint quite get the first part of what you are saying there.

I downloaded the latest dev branch zip and it still cannot play without a web server - was that supposed to be fixed - or did I miss what it was that was broken and was then fixed?

As for including the new soundfonts - I'll try and update you.

-Shantanu

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

No, the fix is adding the script tag. The latest dev version just makes it so that works (otherwise it would try to download twice).

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

I still cannot get it to work without a server...using the latest dev source - am I supposed to be able to play the demos without a server or not?

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

I updated the MIDIPlayer demo to include the script by default. Tested on my computer using the filesystem (running from a folder on my desktop without localhost), works fine.

from midi.js.

Shantanu-Daithankar avatar Shantanu-Daithankar commented on August 16, 2024

Yup - the demo player does work now. Will pull when merged in master.

Thanks @mudcube ! :)

-Shantanu

from midi.js.

kusog avatar kusog commented on August 16, 2024

It took me a while to figure it out, but the latest demo has an issue with IE because you preload the grand piano sounds directly on the page rather than let loader work:
<script src="./soundfont/acoustic_grand_piano-ogg.js"></script>

When on a browser that doesn't have support for ogg, it wont play any sound due to line 148 in plugin.js:
if (MIDI.Soundfont[instrumentId]) {
self.next();
}

Because the grand piano was loaded as ogg, it didn't try to download the mp3. Once I remove the script tag from the demo, the demo plays great in IE11. No clipping sounds.

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

@kusog Ahh, good point. I've updated the method in dev so it uses the same detection script as the non-XHR version. There's now a flag called MIDI.USE_XHR that can be set to false if the programmer wants to not use xhr. By doing this, you can load from file://, but you cannot get the progress of the download (which shouldn't matter if you're using on file:// as it should be instant).

from midi.js.

kusog avatar kusog commented on August 16, 2024

If you are going to support hard coding the JS for a soundfont onto the page so it isn't loaded, I guess it might be good to allow both ogg and mp3 to be loaded at the same time. Why not use the type as part of the key into the map loading the sounds?

from midi.js.

mudcube avatar mudcube commented on August 16, 2024

@kusog I think it's best to not enable hard coding, as then the client needs to download resources they're not necessarily going to use. I know the example did that, but not recommended. I altered the lib to make file:// work with the plugin.js where it detects the proper format to include, and only downloads that file.

from midi.js.

aesc2 avatar aesc2 commented on August 16, 2024

@mudcube Further to the previous posting (Feb 18th), any chance of posting some sample code for how to load the soundfont file as a local file (rather than the XMLHttpRequest with the file:// ) and then use the 'MIDI' object properly ? I'm keen on writing midi code which works in the browser without a server, and presently I have the "Cross origin requests" problem which is stopping me.

Inlining the soundfont (using <script src="./soundfont/acoustic_grand_piano-ogg.js"></script>) seems a good idea, but do I then have to call something else other than MIDI.loadPlugin to run my midi actions ?

eg. if I just directly run the lines in demo-Basic.html (below), rather than in the MIDI.loadPlugin callback, then I get an obvious error that the MIDI object doesn't have 'setVolume'..

var delay = 0; // play one note every quarter second
var note = 50; // the MIDI note
var velocity = 127; // how hard the note hits
// play the note
MIDI.setVolume(0, 127);
MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay + 0.75);

You mentioned above that "the latest dev version makes it work", is that still right ? .. is the fix now in the master branch ?

Any help much appreciated.. thanks!

from midi.js.

aesc2 avatar aesc2 commented on August 16, 2024

.. further to my previous post, I've managed to get the the example scripts playing (eg. basic.html) on but only using the DEV branch on github.

Then I just needed to add the soundfont inline at the top of the file, presumably to stop it trying to issue an XHR request to go fetch it..

<script src="./soundfont/acoustic_grand_piano-ogg.js"></script>

The only thing is I have it running on Mac OS Chrome (36.0), but it doesn't work on Mac OS Safari (7.0.5).. ie. no sound, but nothing in the JS error console either ?

Can you answer if it is supposed to run on desktop Safari, and further mobile safari on iOS ?

thanks again..

from midi.js.

aesc2 avatar aesc2 commented on August 16, 2024

.. further to previous post again.. i now have sound on desktop & mobile safari (iOS 8 beta 5 sdk).

Since I'd inlined the soundfont using (<script src="./soundfont/acoustic_grand_piano-ogg.js"></script>), I was only using the 'ogg' format, which Safari doesn't support. Loading in the mp3 file instead for Safari & it all just works.

can't wait to get going with midi.js now ! ..

from midi.js.

varunagrawal avatar varunagrawal commented on August 16, 2024

Hi @mudcube, can you please provide the changes that lets the Dev branch work locally and how we should set up MIDI.js for our local projects? Also, can this run with the current master setup on a Github page?
Thanks.

P.S. Kickass work with the whole library.

from midi.js.

martyWell avatar martyWell commented on August 16, 2024

I am so thrilled to find these midi libraries! Wow! Like the folks who have posted already, I would like to be able to use MIDI.js in a browser where the files are local and don't have to run from a server. I have tried to follow the earlier posts, but can't figure this out. I downloaded the current Dev branch files. I tried adding the code you mention in your Feb 18 post:

<script src="./soundfont/acoustic_grand_piano-ogg.js"></script>

to the demo-MIDIPlayer.html file, in the section where the other scripts are located. I tried to open the file locally. This is on a Mac (Yosemite), tried both safari and google chrome. The color wheel spins and spins. I'm pretty much a javascript novice -- so, if you could help with specific details about any additional changes that need to be made -- would be so grateful! Thanks!

from midi.js.

kusog avatar kusog commented on August 16, 2024

I would up completely rewriting this project to fit my needs (http://kusogmusic.com/compact). I dropped everything but web audio api support because if its going to “sound like a drunken sailor” in IE then it may as well not work at all. I did take chunks of code from MIDI.js to get things done, but in the end I needed it to work a certain way and it was easier to pare it down to what I really needed. IE12 is going to support web audio api, so until then no IE support.

I’ve even written my own soundfont file generator in C# so that I can take sound files created by my genius music friends which are not used on the kusogmusic.com demo site.

From: Dave Corboy [mailto:[email protected]]
Sent: Sunday, November 2, 2014 12:24 AM
To: mudcube/MIDI.js
Cc: kusog
Subject: Re: [MIDI.js] The demo files are not playing from the zip download (#63)

This looks really awesome and I'd like to use MIDI.js for an upcoming project. At the moment, I'm getting the cross-origin XHR request locally and would like to use USE_XHR (=false) as well.

How does one get access to the dev branch of MIDI.js? Alternately, when do the developers plan on refreshing Master?


Reply to this email directly or view it on GitHub #63 (comment) .Image removed by sender.

from midi.js.

Kobld avatar Kobld commented on August 16, 2024

I dont know why this is closed. Your most basic example does not work STILL. The Ajax xhr request dies when this is downloaded as a zip. Why does this library need xhr and why doesn't this work?

from midi.js.

john02813 avatar john02813 commented on August 16, 2024

I want to play happy birthday using basic.html but I am unable to play one note at a time as they all play at once. I Placed 2 sets of code lines and it plays like a chord instead of 1 note then the next note. How can I play notes to play a song?

<script type="text/javascript"> window.onload = function () {MIDI.loadPlugin({soundfontUrl: "./soundfont/", instrument: "acoustic_grand_piano", onprogress: function(state, progress) { console.log(state, progress);}, onsuccess: function() { var delay = 0; // play one note every quarter second var note = 50; // the MIDI note var velocity = 127; // how hard the note hits // play the note MIDI.setVolume(0, 127); MIDI.noteOn(0, note, velocity, delay); MIDI.noteOff(0, note, delay + 0.75); note= 60; MIDI.noteOn(0, note, velocity, delay); MIDI.noteOff(0, note, delay + 0.75); });}; </script>

from midi.js.

shivrajsa avatar shivrajsa commented on August 16, 2024

@john02813 For last two notes you have same delay [ i.e. delay + 0.75 ] , so both notes are playing at same time, change delay parameter for all notes, then they will be played at different interval. For example : delay , delay + 0.75, delay + 1 & so on

from midi.js.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.