Using Glicol locally with custom text editors

[flexabyte]

Hi there, I'm new on my journey with Glicol, but as a Rust developer I found it very intriguing, especially being able to run entirely in the browser using WASM. However, as I've been learning the language and testing my own tracks, I've found it would be much nicer for me to be able to use my own text editor and have Glicol run locally, maybe with a file listener or something similar to detect file changes so it can auto-run.

So far, I've had some luck with an extremely hacky solution - running a headless chromium browser navigated to localhost:3000 for the Vite app, and running the following code inside the chrome-remote-interface REPL:

Runtime.evaluate({expression: "window.run(`o: seq 60 >> sp \\\\kick3`)"}) 

This actually gets the sound playing locally. I just need to automate the file listener and headless chrome connection so I don't have to work inside the REPL, but inside Vim.

Now obviously this is a hack, and as I've only spent a few hours on this code base I've not been able to full grasp exactly how the encoder links together with the browser to play the audio, I'm sure there's a much cleaner solution that taps into pulseaudio or something. I'm open to suggestions, as I progress on my journey towards using VSCode or Vim as part of my music workflow!

Finally, if we do get to a point where we can write music in Vim/VSCode - it would be super sweet to have syntax auto-complete and recommendations. I'm not sure where to start with that but I can definitely learn.

Thanks

[EnigmaCurry]

Yea I want this too! Ideally I think it could be a standalone desktop app that does not even need a web browser. Or even a simple program that just runs a graph, and you can spawn it with inotifywait whenever the file changes. I just found out about glicol, so I don't know what's possible yet.

I have cobbled together something that lets me use Emacs with the javascript version in the web browser on my own website. So, here's my current live coding setup:

• Install the Edit with Emacs server and browser extension (works in Firefox or chromium).
• Go to https://music-functions.d.rymcg.tech/#glicol and right click (or double click) the text area box to open a new Emacs window.
• Modify the code and save it, and the text is automatically updated on the page and the audio graph is restarted.

The source code for this (and the whole site) is here you can deploy this to your own Docker server or just use my server if you like.

I made this because the main glicol.org page is not using a regular textarea element (a prerequisite for the Edit with Emacs browser extension). Also, I wanted the audio engine to update after every single change without needing the Ctrl-Enter key like the main glicol.org page has.

So far, if you create an invalid DSP program on my page, it will cut the audio, unlike glicol.org which will continue to play the previous working version. I'm not yet sure how to catch the error it produces when the code is invalid. Is there a function that can verify/compile a DSP without running it, that I can call first to check it?

[EnigmaCurry]

There's a few alternatives to the Edit with Emacs browser extension, but I have not tested them.

textern is documented to work with vim and should work similarly.

[EnigmaCurry]

Forget about the above, I've found a better solution: GhostText

This browser extension is compatible with glicol.org, you can edit the source code in almost any editor (emacs, vim etc) and its automatically synced back to the browser and vice-versa. The only problem is I still have to switch back to the webpage and press Ctrl-Enter to update the engine. I wish I could do that from Emacs directly (eg. C-c C-c), but at least this lets me edit the code in a familiar editor.

[chaosprint]

Wow, this is very interesting. A little hack you can do is to enter this in the browser console:

editor.on("change", e=>{
    let code = e.getValue();
    if (code.indexOf("///")!==-1) {
        run(code)
    }
})

Then if you enter:

o: sin 440 ///

The code will automatically run.

To change the code and update again, just remove one slash /, make it something like:

o: sin 220 //

When you add that slash back, the code will run:

o: sin 220 ///

[flexabyte]

This is awesome! Definitely going to give this a try.

[ibz]

Glicol running in browser is definitely a big turn off for me. I understand that compiling it to wasm is a cool way to demo how simple it is (try compiling SuperCollider to wasm...) and it is also a great introduction for people that just discover it and are curious to try out a Hello World, but for anything more it should really run locally and let you use your own editor.

I think it should actually be as dumb as possible - not a "desktop" app. Not looking for file changes. Just a command line app that is invoked when needed, same like running a compiler on a piece of code - that would parse the file and keep running to produce sounds, then it could be called from another terminal to pick changes and update the graph in the process that is already running, if any. That way everybody is free to use any editor.

Curious if there are any plans to take it in this direction, or is it intended to stay in the browser?

[chaosprint]

The GhostTest solution mentioned above works for most popular editor.
But Yes, a CLI tool will be provided in the future, kind of similar to the workflow on Bela.
https://youtu.be/XKaSJh3B3go

[chaosprint]

It's coming now:
https://github.com/glicol/glicol-cli

[ibz]

This is pretty amazing! Thank you!

[TenStrings]

I wanted to share something here, in case someone is still following this discussion.

I wanted to have better editor support in helix, since it is what I've been using lately, so I put together a small tree-sitter grammar for basic syntax highlighting, and built a small language server on top of it.

It's not much more than a PoC right now, and I haven't really tested it that much, but here is the code in case anyone wants to see/try: https://github.com/TenStrings/glicol-lsp

Although my main interest was to use it with helix, I also set up a vscode extension (mostly by copy-pasting from the tower lsp template), so it can also be used there. nvim setup shouldn't be too hard neither, but I haven't tried it.