Use midicube npm published module?

[jgarte]

Hi @newlandsvalley,

I tried deploying chord-editor to jgart.whereis.xn--q9jyb4c for testing but the audio does not work because of the following errors:

Content Security Policy: The page’s settings blocked the loading of a resource at https://gleitz.github.io/midi-js-soundfonts/MusyngKite/acoustic_guitar_steel-ogg.js (“default-src”)

SourceHut Pages is blocking the downloading of external resources like the one specified on this line:

purescript-soundfonts/src/Audio/SoundFont/Gleitz.purs

Line 54 in 17dec70

gleitzBaseUrl = "https://gleitz.github.io/midi-js-soundfonts/"

I found an issue regarding publishing midijs as an npm module. It sounds like midijs is abandonware but mscuthbert published a module on the npm registry.

What do you think of using mscuthbert's published module on npm instead of downloading the fonts off the internet?

or else host then locally on your own server.

The README mentions two possibilities for loading the soundfonts but a third possibility would be to be able to load them in the context of a service that does not grant you access to the server. If that service restricts downloading external resources then the user of purescript-soundfonts will not be able to use the library in that deployment environment as demonstrated with jgart.whereis.xn--q9jyb4c. I think that using npm to install the soundfonts would resolve this issue.

What do you think?

[newlandsvalley]

If you'd like to investigate this and it ends up with a third option to access the soundfonts, I'd be happy. Presumably hosting the soundfonts locally and using the existing option 2 would work, though, wouldn't it?

[jgarte]

using the existing option 2 would work, though, wouldn't it?

Hi John, do you mean to install the fonts manually without using npm? If so I think that that would work too, yes. I'll have to do some more research on what that would involve versus just just running npm i midicube and then acquiring the gleitz soundfonts.

When you deployed chord-editor on your server, you did not download the gleitz fonts over the CDN? You had the fonts and all required midijs/gleitz fonts dependencies copied/built on the server?

Update: I found out that I can have git repos as npm dependencies in SourceHut Pages. I could add their repo url with correct tag as an npm dependency. If the library needs some building, I can have an install script of my own that builds the library for me. I'll have to look into setting that up for my approach with SourceHut Pages.

[newlandsvalley]

I used simply to copy the fonts I needed from the gleitz site and place them in a folder dist/assets/soundfonts.

[jgarte]

I used simply to copy the fonts I needed from the gleitz site and place them in a folder dist/assets/soundfonts.

How does chord-editor or purescript-soundfonts know to access the local soundfonts in dist/assets/soundfonts? I haven't read that part of the code yet. I had vendored some more js in this commit for tenor guitar and others when I deployed this branch on SourceHut Pages:

https://git.sr.ht/~whereiseveryone/chord-editor/tree/srht/item/dist/assets/soundfonts

Does it look like I have all the soundfonts needed in the above commit (soundfonts folder) I linked or am I including the wrong files maybe? I'll have to research more on that.

[newlandsvalley]

Looks like you have them all.

At the moment, instruments are loaded within each Page.purs. (As we move ahead, we may need to change that to load all the instruments at the start, but that's for another day.). As you can see, this uses loadRemoteSoundFonts which means remotely from Gleitz. But there are other functions, for example loadInstruments which have the option of loading locally.

    LoadInstruments next -> do
      instruments <- H.liftAff $ loadRemoteSoundFonts [ AcousticGuitarSteel ]
      _ <- H.modify (\st -> st { instruments = instruments })
      pure (Just next)

[jgarte]

which have the option of loading locally.

So, I would have to explicitly set that when deploying? I will try :)

@newlandsvalley

I had this idea the other day:

What do you think if we structure/present chord-editor more like a library of halogen chord diagram components? We can provide an example folder with examples of how you can integrate the components into a real website. I was reading through the source code of purescript-halogen-formless and it gave me this idea for chord-editor. purescript-halogen-formless is a halogen library for making form components and they give examples of how you might use it in a real website.

I think this would invite//encourage people to use chord-editor more as a halogen chord diagram component library they can use if they need to display instrument diagrams in their custom website. What do you think?

[newlandsvalley]

If we want to move to loading locally, which may be a good idea anyway, we need to edit the chord-editor code to do so and then copy the soundfonts into the assets.

Your idea of a library is probably good, too. It is what I do for the majority of my components anyway - e.g. abc-editor, abc-tutorial, polska-metronome etc. because they are all components of my big tradtunedb app. I never did this with chord-editor because it was previously designed as a self-contained one-off.

[jgarte]

I think that now that we are planning to add more instruments in the near future it'll start to benefit from being presented as a library like your other projects that involve components. I should first work on getting that refactor in :)

[newlandsvalley]

Yes please. Let's attack one at a time. And there's no hurry from my point of view.

[jgarte]

With the library approach I can then embed a chord diagram component into a custom website of mine the way I'd like and the code base is already set up that way for me to just "grab a particular instrument chord diagram component off the shelve", so to speak, and use it. Till soon! :)

[jgarte]

Update: I got the local soundfonts to load on SourceHut Pages with the loadInstruments function.

Here's the commit I have in a branch that implemented that: https://git.sr.ht/~whereiseveryone/chord-editor/commit/328c0f438dd1acd6242e7c5d62bd12ec7486c1a8

CSS doesn't seem to load for me yet though on SourceHut Pages (it works locally). Not sure why... And, downloading the image of the chord diagram is not working either. But sound works now! 🎉 I'll try debugging the CSS and downloading of chord diagram images soon.

https://jgart.whereis.みんな/

[jgarte]

CSS Update:

Silly me, I didn't fetch and git rebase off of your latest master for my custom branch. That's why the CSS was not working 😄

[newlandsvalley]

It's looking good!