Embedding an RNBO application into a website
Jacob Smith
Apr 18 2023 | 11:55 am
Hi everyone! This is my first post on this forum, so if I have broken any forum rules, please let me know. Alternatively, if I need to alter this port in any way please let me know too.
The project:
I'm working with a team of web designers to develop a web-based application that allows individuals to interact with and develop their own tones and stream these from the webpage. There's a whole list of features that we'd like to implement in future versions, but for now, we are just looking to get the basics up and running. My project responsibilities are to develop the application, for which I will likely be using RNBO due to its web-export capabilities. The other team members are developing the web page itself and will be embedding my application and creating the UI necessary for users to interact with it. For now, they are using Webflow (https://webflow.com/?gspk=cmFibGVzaGt1bWFyNDIwMw&gsxid=SPEMaqYDtXBw&utm_medium=affiliate) but would be open to alternative web-building tools.
The current issue:
There is a certain level of disconnect between the web designers and myself as they have never developed an application and I have never developed a web page. From what I have grasped, they both have a decent understanding of HTML, but none of us has a deep understanding of javascript (though I am learning). Therefore the (rather ambiguous) question I have is; how do I prepare the RNBO export in a way that they are then able to embed it and incorporate a nice UI?
Additional background information:
Currently, I have been experimenting with the web export template (https://github.com/Cycling74/rnbo.example.webpage) with success in creating a standalone webpage example. I realise that I will need to customise the app.js file and index.html files in order to create a streamlined interpretation of the RNBO export although, for now, my priority is getting everything working first before I start addressing that.
The other team members have consulted chatGPT4 which recommended using Web Audio API in order to tie the .json files to the front-end UI. I'm not sure if this is necessary but would appreciate insight if anyone has any.
Needed help:
To summarise, I am looking for any help/advice/information on addressing the questions below. Please forgive me if some of these questions seem obvious - I am fully aware that there are plenty of gaps in my knowledge so feel free to assume as such. I am also aware that some of these are incredibly open-ended, but really I am looking for any useful information to help guide my future research and experimentation.
- It is possible to embed an RNBO export on a website and fully customise its UI using web-building tools like Webflow? If so, how can I embed the .json and .js files and link them with front-end HTML code using such a tool? Could anyone provide an example, perhaps using the RNBO example patch?
- If Webflow itself is not an option, can anyone recommend an alternative web-building tool that could implement an RNBO patch?
- Has anyone had success embedding an RNBO application into a website and customising its UI? I'd love to see examples if anyone has any.
- Am I better off using an alternative to RNBO for such a scenario? If so can anyone recommend one?
Thank you for taking the time to read this. I will be incredibly appreciative of any help at all!