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!

    • Jenagan Sivakumar's icon
      Jenagan Sivakumar
      May 13 2023 | 6:39 am
      I'm currently studying full stack web development. I'm aiming to do my final project on this topic, I would like to have a functioning device exported to my localhost. I want to jump in on this thread for some guidance too :)
    • Nathan Hansen's icon
      Nathan Hansen's icon
      Nathan Hansen
      May 24 2023 | 11:29 pm
      I'm in a similar boat, I've gotten an extremely simple RNBO patch to work on the web building application Wordpress. I did this by using its 'Custom HTML' Widget, creating a script header, and then using RNBO's javascript API to import the patch, its file dependencies, then using HTML to create some buttons that can be used to interact with the patch. It feels a little hack-y, I had to change the dependencies.json file to point to the URL's in Wordpresses media folder. If it works, it works I guess.
    • ninosgr's icon
      ninosgr's icon
      Jun 19 2023 | 5:01 pm
      Hi, I just started researching for an idea I have today. I would be very interested in what you have to share for the matters addressed above. Thanks!!!