pckerneis / webaudio-visual-editor

A visual editor for WebAudio graphs

WebAudio Visual Editor

Important note : this project is no longer maintained.

WebAudio Visual Editor is an open-source project that aims at giving the HTML5 WebAudio API a powerful GUI, in the form of a desktop software written in C++ with JUCE. It generates vanilla Javascript code.

WebAudio Visual Editor is not :

• A HTML5 app running in the browser. It is a software running on desktop (tested on OSX and Windows) that generates HTML5 code (that is HTML, Javascript and CSS).
• A Javascript library. If WebAudio Visual Editor comes with some JS code, it's not designed to be used as a library but as a source code generator.
• A digital audio workstation. In fact, WebAudio Visual Editor doesn't even produce sound by itself. Instead, it uses a web browser to generate sound. It makes it easy to produce sound making virtual devices and deploy them on websites.

Here are a few design goals :

• Visual editing : audio graphs can be edited in a modular view. Other elements can be added to the graph such as dynamic containers, messages to nodes, comments or JS sub-scripts. The resulting JS code is generated accordingly as well as a HTML test project.
• Reusability : graph elements can be saved as presets. This makes it easy to share the most common portions of code between projects and prepare templates for complex tasks.
• Produce code with no dependency : you can just copy and paste the few JS files generated with WebAudio Visual Editor into your existing project without worrying about including and maintaining other externals. The output code is vanilla Javascript and only uses code defined in the WebAudio API. It is encapsulated using the module pattern so that it won't interfere with other Javascript code.
• Designed as a playground : the software is primarily made to explore sound generation techniques and quickly prototype ideas. It is meant to be an invitation for non-specialists to get to know the WebAudio API. Working project examples are included and testing a project in the browser is as simple as hitting a button! If only a few things can be achieved without typing Javascript code, the software aims at providing the user with suggestions and making easier tedious tasks such as loading an audio file by using a few higher-level objects.

Please note that for now, the software is more suited to prototyping than to 'serious' web production. Most notably, the software is based on the latest WebAudio API w3c spec which is not fully implemented in all browsers. You can have more info on supported platforms on Mozilla's guide.

Getting Started

For OSX, you can get the latest built version here. Simply download and open the DMG file and copy the app somewhere on your computer and you're done.

For Windows and Linux users or to prepare a development version, you'll find instructions below to build WebAudio Visual Editor from a Projucer file.

Prerequisites

You'll need the library code from JUCE. You can get it on their website or on GitHub. We also use the Mongoose module for JUCE.

Installation

Open "WebAudio Visual Editor.jucer" with Projucer, set the exporter for your development environment and generate the project. Build and run from your development environment. If you need more information for this step, here is a complete tutorial.

Testing

You can then open one of the example files and hit the "Test in browser" button. This should open a new tab in your default browser with a test page containing at least the name of the project and a "startAudio" button. If everything works, you should be able to hear the sounds from the examples.

Built With

• JUCE - Cross-platform C++ library
• Mongoose module for JUCE - A JUCE wrapper for Mongoose embedded web server

Contributing

Feel free to submit contributions. For code styling, please refer to JUCE's coding standards.

Authors

• Pierre-Clément Kerneïs - Initial work - pckerneis

See also the list of contributors who participated in this project.

License

This project is licensed under the GPL v3 License - see the LICENSE file for details

webaudio-visual-editor's Issues

More in-app documentation

I'd like more in-app documentation in various forms.

• The only one implemented today is the tips for Message elements (a popup-up filtered list of methods accessible is shown when the message's editor is used).
• There should be a description of WebAudio elements such as nodes, contexts, buffer... It could be a tip window in the LibraryPanel or maybe a footer bar (but it'd be a small space for potentially long texts).
• There should be a documentation panel. It can be based on JUCE's WebBrowserComponent to show HTML doc. Quick access to topics should be possible (something like "Show in documentation" in graph elements popup menu).
• Auto-completion/validation in the code editors is too ambitious for now. It'd require to actually interpret the JS code.

jassert when inspecting multiline comment

Describe the bug
There's an assertion (jassert) in Debug mode when trying to inspect a comment name property with line breaks. The PropertyItemTextComponent's editor isn't set into multiline

To Reproduce
Steps to reproduce the behavior (in Debug mode)

1. Create a comment element (right-click on the graph panel, Add..., Add comment)
2. Type some multi-line text.
3. If you select this comment alone, a jassert is triggered when updating the inspector panel.

Expected behavior
I think the best thing to do would be to allow multi-line text property components. But that would need some visual trickery as the first line of the property's value would begin with the parameter's name label. e.g.

value: "This is a multiline
text looking good"

We would need either to add some 'offset' to the first line of the value's TextEditor, or
having smart connected editors for each line (that sounds heavy for objects that may have thousands of copies for a session) or, the simplest solution (but not as much satisfying) : just add a line break before the value section e.g.

value:
"This is a multiline text
made easy"

Desktop (please complete the following information):

• OS: OSX 10.13.6
• Version: 0.0.1

No way to reach "preferences" and "about" windows on Windows

A menu category should be added in the main menu bar on Windows to add a "Preferences..." menu item as well as "About...".

AudioNode constructor methods aren't handled by Safari

Chrome and Mozilla accept constructor methods for AudioNodes but Safari is still expecting the factory methods (e.g. AudioContext.createGain() etc...). There should be an option in the app preferences to determine wether we should use the factory or the constructor methods.