Hints for using Tracktion Engine in a web app front-end

Currently I’m using this limited DAW inside my web app front-end:

It’s in JavaScript. So, using it along with HTML/CSS is trivial. However, it’s limited in features. I plan to replace it with Tracktion Engine.

Now, I’m confused and cannot figure out how to do the replacement. Tracktion Engine is in C++. How can I use it in my web app front-end along with HTML/CSS? Is there any reference which might help? Thanks in advance.

JavaScript, imo, is not fast enough for DAW. It would be unusable for projects.

Secondly, as far as I know, you cannot use anything other than JavaScript with html. You’d most likely need to build a compiler in JavaScript to run your c++ but as I said before, JavaScript is no where near fast enough for a DAW.

C++ in web development is really only used in backend stuff.

You could build a browser in c++ and run your program that way.

The WebAudio API is pretty powerful and runs in most browsers, so its not impossible to build a DAW using it and a html/css/javascript UI. Granted it won’t scale as well or have as many capabilities as a native app, but its not out of the question entirely.

1 Like

Hey @m3g, welcome to the JUCE Forum! So from your question I’m going to guess you’re new to development? One challenge you have with trying to use C++ in a javascript app is whether or not the C++ project can be compiled into a format that javascript can interact with in the browser. The main way that is done is by compiling C++ to WebAssembly (WASM for short). I’m not sure but I don’t think the Tracktion library compiles to WASM, but I would love to be wrong!

You may be better off using a javascript library like ToneJs. You could also make a fork (a term from the git version control tool for making a local copy) of the waveform-playlist repository on github and adding the features you need yourself. Who knows, the owner of the library might even accept your additions and merge it into the library.

If you’d like to use Tracktion engine, you’ll have to make a stand-alone application that runs outside of the browser. There are a lot of great resources for learning how to do that on the JUCE site, but if you’re new to development it may be a bit of a learning curve.

Best of luck!

1 Like

In my opinion this should be posible. The tracktion engine loads an editfile and plays it. The edit is only a XML file in memory which contains all information about your project like tracks, clips and so on. All you have to do with your GUI is to manipulate this XML file and handle play/stop/pause/arm tracks/record and positioning the play head.

But I don’t know much about javascript to say it’s posible.

1 Like

Thanks! Very helpful.

Maybe front-end can modify the XML file and can send it to back-end. Then back-end server can run Tracktion Engine and update the UI with the result. Just a wild idea. I’m not sure about its feasibility.

These kinds of things are possible but require lots of hacking and language conversion boundaries. You’d basically have to create a JSON API for what communication your apps needs with the engine and communicate via that. Ideally you’d either want the engine as a native C++ app or compiled to WASM via Emscripten. I’ve no idea how feasible the second is at the moment. Last time I checked, WASM was still struggling with C++ threads due to potential security isses.

We do have a long term plan for this use case but we’ve not even begun fleshing out the details yet so don’t expect it any time soon I’m afraid.

1 Like