Sc.wasm - SuperCollider for the web

Deployed a new version:

  • Play buffers from URLs - ~buffer = Buffer.read(s, "https://sc.dennis-scheiba.com/freqshiftfb.mp3") - pay attention to cross-origin headers of the server! You can load wav, ogg, mp3, flac and opus. The de/encoders add around 4 mb to sclang/scsynth, so doubling their size - I’ll therefore release 2 versions of the wasm build - w/ and w/o libsndfile support
  • add MouseX, MouseY, MouseButton and KeyState UGens

See e.g. https://sc.dennis-scheiba.com/c/2b1746cf177b892163f25941c28d49ce

There is also already the possibility to load quarks, but this is more for the curious ones who dig into the source code since I still need to figure some things out for that.

Next steps are:

  • Expose further WebAPI plugins - i.e. Pointer Events, Device Motion Events, Battery Status and Vibration API [sadly not supported by apple…]
  • Add dedicated buttons for eval/cmdperiod on mobile
  • Compatibility w/ strudel/tidalcycles
  • Share files between lang/server
  • LSP support… [bigger one]
  • Syncing of lang/server [bigger one]

btw - what is the consensus on deploying this website on code.supercollider.online once it has reached a more stable state?
I’d also like to collect some examples from the community which can be loaded at random via a button - should we use a repo to collect those?

11 Likes

Had this on my bookmarks for some time but just now tested it and sorta freaked out as soon as I did s.boot and {SinOsc.ar}.play and it worked, really amazing stuff in front of my eyes/ears. Congrats on this development! This will be huge for teaching and for prototyping anywhere!!!

7 Likes

very cool work!

i was able to get a build going, but documentation seems to be missing. is there a separate build step for that?

1 Like

Congrats to get the build running, good to know that the setup works not just on my machine and CI! Just in case: you can download the build via the CI as well :wink:

You’d have to use SCDoc.renderAll through your locally installed SC to get a local copy of the docs - afterwards you’d have to copy the generated HTML files (use SCDoc.helpTargetDir.openOS) into a docs folder of the folder from which you serve the website - check the browser console for the specific page that is missing.

The original idea was to use an iframe to https://docs.supercollider.online/ but github pages does not set the access headers to allow for that…

Let me know if you need further assistance.

3 Likes

thanks for the hint!

i am building with Nix, so the locally installed SC is not really available :wink: but i can of course do a native build to render the docs. it turns out the CMake build already includes a doc target (when configured with -DSC_DOC_RENDER=1) which does SCDoc.renderAll.

in case any other Nix users want to play with this, i have the whole thing automated in a flake at pulu/supercollider-webeditor-nix: Nix flake for SuperCollider web editor - Codeberg.org

Hey Dennis.
Amazing work on this!
I am very excited for the future!
I did a little noodle to celebrate.

2 Likes

Ok I think I got the hang of it now.
Thanks again @dscheiba .
It feels amazing to be doing this in the browser.

https://sc.dennis-scheiba.com/c/ef2f3259fce2787120aa185e6a32fb23

3 Likes

Its really cool to see people start using it :slight_smile:

Also sharing some of my personal snippets:

would love to get redFrik on it and get the sc-tweet revival, between code lyric and golfing.

Next step is getting the sclang PR merged which then is followed with the libsndfile and buffer extension (which is already deployed on the website above) and then improving the syncronization between client and server which could be tricky. I may look into loading/adding server plugins, but I don’t really know how this is feasible. It is also already possible to load Quarks, but the problem is that we have no space to download them easily, which will be solved by the package manager.
I may also look into serving the docs through the sclang wasm.

Once this is done I want to improve the editor and deploy it under code.supercollider.online so it becomes less “my personal project” but one of the community.

5 Likes

It would also be nice to have some way of having multiple little code snippets that you can play on the same webpage. Perhaps with a shared server but multiple editors. Im thinking about examples on the SC webpage?

1 Like

I have lots of questions. I think my biggest one is what your goal is? Do you want to arrive at feature parity with SC IDE? Performance parity as well? I am very impressed by what you have done and I am very excited for the future.

Your patches are great! I especially liked the snare one. Lots of variation. Oh and great about the numInputBusChannels=0 line. I had a feeling that would work. Great to get rid of that scary asking the user for access to microphone dialog. Oh and the s.sync I also had a feeling would clear up an initial late message I had. Great! Thanks for those.

How would you feel about a “startup file” that could be hidden away in another code tab and would be included when sharing a link? I would love to have a way to provide just a clean interface for a user (a Pattern code block).

I did another lil noodle:
https://sc.dennis-scheiba.com/c/1fdc9daa8c960433b4e9172a230800d9

2 Likes

Somehow it is not possible to write this in more than one line

// welcome to sc.wasm

s.boot;

{(SinOsc.ar(447) + SinOsc.ar(445, SinOsc.kr(0.2).range(0,6))*0.4)}.play

shouldn’t this work? Used Chrome to test.

Just tested your code on Chrome and it works for me. Maybe you have tested it on a mobile phone and did forget to get out of silent mode (i.e. on iPhone the left switch).

If it still doesn’t work, can you see if the dev console shows some messages?

Sorry, i was unclear. I mean this will not work

// welcome to sc.wasm

s.boot;

{
(SinOsc.ar(447) 
+ SinOsc.ar(445, SinOsc.kr(0.2).range(0,6))*0.4)
}.play

writing it in one line works

Well, this wouldn’t work in the IDE either. If you select the code block and then evaluate it, then it works. Or surround each block with ( ) :wink:

1 Like

( ) is the solution. Thanks

Fyi, I’m working on a parser and compiler rewrite, and I believe I’ve fixed this and made this work.

1 Like

How would you feel about a “startup file” that could be hidden away in another code tab and would be included when sharing a link? I would love to have a way to provide just a clean interface for a user (a Pattern code block).

2 Likes