Building a website to host RNBO patches
I'm hoping to build a website to host, amongst other things, RNBO patches i've made.
I've not built a website before but it doesn't look too hard with the various tools out there.
What do I need to know before attempting this?
Has anyone already done this?
Is there a specific website building tool which would be best for the job?
Will the site need to have any specific features to allow it to host RNBO patches?
I've checked the documentation and I can't find much detail about doing this.
Thank you for any assistance you can offer.
RNBO is basically framework-neutral so you should be able to use anything you like to host HTML, CSS and JS statically. There are no server requirements. I'm currently assembling something using React/Reagent in ClojureScript, and it all seems to hang together. We're planning to deploy to AWS.
One wrinkle might be CORS issues if hosting audio files for buffers on a different server. I'm experimenting with this at the moment.
Thanks Nick, that's very encouraging.
If someone at Cycling would consider creating some tutorials on creating websites with some javascript UI devices for their RNBO patches, I think that's something the userbase would really enjoy and utilise.
I'd definitively enjoy a RNBO specific tutorial for creating Websites, would be great to have more use-case examples for all platforms actually
is it possible to host a rnbo patch on github pages?
Hi,
first of all - thanks for your insights and questions! I'll try to answer and point towards some resources we provide below.
We host an example template on GitHub as a starting point for anyone new to web programming with RNBO. While it's mostly focused on getting it to run on your local machine the same concept applies when using a remote server. In its simplest form an exported patch just requires a webserver capable of serving static files (HTML, CSS, JavaScript, JSON etc.) and the rnbo.js code.
While I'd recommend it for bigger projects I assume for just getting started you won't immediately dive into building a project using a bigger framework and managing your dependencies with a package manager like npm. As shown here you can grab rnbo.js from our CDN and just include it as a script tag in your HTML file.
More generally I'd like to understand better what the exact hurdle is when trying to get started as I'm not fully sure it's RNBO or instead a more general introduction to programming websites or web applications. If you could shine some light on this I'd be happy to help or point towards resources that might be helpful.
Also @pedro, would you mind expanding on this a little bit and give a few specific examples of use-cases and platforms that you feel remain unclear?
Just for completeness - For working with rnbo.js we provide the API Reference as well as more descriptive walkthroughs and guides on how to interact with a created RNBODevice. However, it is correct that it does not cover an introduction to web programming
@John I don't see any reason why it shouldn't be possible to use GitHub pages. As mentioned above you just need a web server that can serve static files, which you totally get using GH Pages, AWS S3 and others.
Thanks,
Florian
this tutorial runs you through exactly how to do it -- i got it working, and am now in the process of trying to expose some already-existing m4l patches on a web browser, so trying to get those ported to rnbo.
https://www.youtube.com/watch?v=gnyxAf1bwok
Thanks so much for your detailed reply Florian.
For me, the most exciting possibility of RNBO is creating patches in Max then sharing them online as free access instruments. I know next to nothing about web programming, but these possibilities are making me want to learn. Music has always been my primary interest and my knowledge of programming has grown entirely from that. I've registered a domain for the first time and I intend to learn how to embed some of my patches in pages in that site.
I have experimented with the web template, but to build more customised interfaces I will need to learn Javascript and JSON. I have already started to do this. There are resources available for this, of course. But some step by step tutorials on how to build a page with simple interfaces like on the learning synths page would be very helpful. Existing tutorials are very general purpose, but a RNBO user could do a lot with knowledge of building a small number of Max interface devices in Javascript, linking them to Max parameters and embedding them in a webpage.
A button, a slider, a numerical output box, a dial and maybe an XY pad. Changing the colours, sizes, shapes and layout.
https://learningsynths.ableton.com/
I am interested in the Intersymmetric Sequencers of Mark Fell, Rian Treanor and James Bradbury. These ideas are implemented very effectively for layman use. There is huge potential for the Max community to build a wealth tools to greatly democratise music-making. I think a lack of web programming knowledge will be the greatest barrier to realising that. The more that barrier can be lowered, the better, in my opinion.
https://intersymmetric.xyz/nnnb/room1/
I don't yet know enough to know how difficult it would be to achieve this. I am following the RNBO.js tutorials but as a web development beginner, it is certainly a steep learning curve. Perhaps it is impossible to lower this curve much more. Perhaps this is outside Cycling's remit. I just know that as an enthusiastic user, this is what I immediately imagined using RNBO for. I love the idea I could share my creations with non-musical friends, elderly people and children with friendly interfaces they can easily and enjoyably play with.
GitHub Pages work fine with RNBO web exports fine for me, e.g.:
https://maceq687.github.io/FaceArp/
It's pretty straight forward with the setup, you can start with the template:
https://github.com/Cycling74/rnbo.example.webpage
And once you have your project on the online repository, you can publish the page following the manual:
https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
I've now had time to try building a website around a RNBO patch.
https://www.iimaginary.com/rnbo/index.html
As other users have reported, setting up a page with the template example is straightforward enough. Making a more visually appealing site involves setting up event listeners on CSS objects and attaching them to parameters of the RNBO patch. This is less straightforward and probably out of my reach without specific guidance.
I hope someone from Cycling will make a tutorial for this. To my knowledge, no one other than James Bradbury has, as yet, been able to build a static website using HTML, Javascript, CSS and RNBO web export. Seems kind of a shame but I'm determined to get there eventually.
Hi Damu,
It is nice to hear nice things about oneself :) I think C74 have worked quite hard to make the interface between RNBO and js (and therefore your DOM) quite simple. For me the framework I use under the hood (SvelteKit) to build the website proposes a "reactive" approach to binding data to DOM elements, so its quite natural to have side effects be that RNBO is affected.
I plan to write a RNBO tutorial at some point – I just need to find the time and energy for it.
In the meantime you are welcome to observe the client-side code I wrote for intersymmetric here: https://github.com/jamesb93/intersymmetric.