Compiling Juce with Emscripten

I have an audio mastering application written in Juce which I would like to provide as a web application to demo the tech. I do not need a UI, nore do I need anyform of playback. I have got a file drag and drop working in javascript that pulls a files raw data into a c++ emscripten WebAssembly module. Cool.

I would like to use Juce for audio decoding and encoding (I have written a wav encoder and decoder before and it was a lot of work that I would rather avoid + I want to support other formats).

I have a local copy of the library and updated some include paths so it all links properly. I was getting some Target Platform errors when compiling. My first thought was set WIN32 as target and work through some functional errors but I found most errors could be resolved using ANDROID as platform target. Emscripten compiles the project with 1 warning

missing function: _ZN4juce78this_will_fail_to_link_if_some_of_your_compile_units_are_built_in_release_modeC1Ev
warning: build with -s DEMANGLE_SUPPORT=1 to link in libcxxabi demangling

But project fails to run in web. I have tried on and offing Demangle support with no joy.
Is there anything else I can do without 3rd party libs? or writing my own encoder/decoder

Hi,

does this help?

Best,
Ben

Quite possibly does. Will give it a bash now. One of the annoying things about emscripten is it doesnā€™t pick up .cpp from their respective headers.

PS is this only for Core module ?

Do I do this for all modules I want to include

ā€˜ā€™ā€™
#include ā€œmodules/juce_audio_basics/juce_audio_basics.hā€
#include ā€œmodules/juce_audio_devices/juce_audio_devices.hā€
#include ā€œmodules/juce_audio_formats/juce_audio_formats.hā€
#include ā€œmodules/juce_core/juce_core.hā€
#include ā€œmodules/juce_cryptography/juce_cryptography.hā€
#include ā€œmodules/juce_data_structures/juce_data_structures.hā€
#include ā€œmodules/juce_events/juce_events.hā€

#include ā€œmodules/juce_audio_basics/juce_audio_basics.cppā€
#include ā€œmodules/juce_audio_devices/juce_audio_devices.cppā€
#include ā€œmodules/juce_audio_formats/juce_audio_formats.cppā€
#include ā€œmodules/juce_core/juce_core.cppā€
#include ā€œmodules/juce_cryptography/juce_cryptography.cppā€
#include ā€œmodules/juce_data_structures/juce_data_structures.cppā€
#include ā€œmodules/juce_events/juce_events.cppā€
ā€˜ā€™ā€™

Nope still a butt load more linker problems.
Will continue with coding everything manually for web portal but still would love to get Juce playing nicely

Do you only want JUCE for audio encoding/decoding or also for your DSP stuff?

Well primarily for encoding decoding. DSP would be useful but not essential as I have all my own DSP libs.

I have currently made WAV decoder which works with 16 / 24 and 32 bit but I know itā€™s probably not as good as juceā€™s as Iā€™m assuming little endian e.t.c. I am able to do the same with AIFF but again I donā€™t want to reinvent the wheel and other formats would be handy.

Iā€™m just struggling scaffolding between juce and emscripten. Not using any IDE and just using Atom to code the project and command line to buildā€¦

I ported JUCE to emscripten in the past demo, maybe this helps:

PS.: I also have a more recent version with support for Web Audio API, Web MIDI API and fast GUI rendering via HTML5 Canvas. The more recent version uses CMake so one can use CLion for a not-too-shabby development experience. The following is a CMakeLists.txt that may get you started (it of course needs tweaking!):

cmake_minimum_required(VERSION 3.10)

set(EMSDK_ROOT ā€¦/ā€¦/ā€¦/ā€¦/ā€¦/ā€¦/emsdk)

set(PROJECT_ROOT ${PROJECT_SOURCE_DIR}/ā€¦/ā€¦) #
set(JUCE_MODULE_PATH ${PROJECT_ROOT}/ā€¦/ā€¦/modules)
set(PROJECT_NAME EmscriptenDemo)

set(CMAKE_SYSTEM_NAME Emscripten)
set(CMAKE_CXX_COMPILER ${EMSDK_ROOT}/emscripten/1.38.6/em++)
SET(CMAKE_CXX_FLAGS_RELEASE ā€œ-O2 -DNDEBUG=1ā€) # -O3 throws ReferenceError: establishStackSpace is not defined
SET(CMAKE_CXX_FLAGS_DEBUG ā€œ-O0 -g4 -DDEBUG=1 -D_DEBUG=1ā€)
SET(CMAKE_CXX_FLAGS ā€œ${CMAKE_CXX_FLAGS} ${GCC_COVERAGE_COMPILE_FLAGS} -s USE_PTHREADS=1 -s USE_SDL=2ā€ )
#SET(CMAKE_EXE_LINKER_FLAGS ā€œ${CMAKE_EXE_LINKER_FLAGS} -s DEMANGLE_SUPPORT=1 -s USE_PTHREADS=2 --preload-file ${PROJECT_SOURCE_DIR}/ā€¦/ā€¦/Resources@ --bindā€ )

set (CMAKE_CXX_STANDARD 14)
file(GLOB_RECURSE APP_SOURCES ${PROJECT_ROOT}/Source/.cpp ${PROJECT_ROOT}/Source/.h)
file(GLOB_RECURSE JUCE_SOURCES
${PROJECT_ROOT}/JuceLibraryCode/.cpp
${PROJECT_ROOT}/JuceLibraryCode/
.h
)

add_executable(${PROJECT_NAME}.html ${JUCE_SOURCES} ${APP_SOURCES})
target_include_directories(${PROJECT_NAME}.html PRIVATE ${PROJECT_ROOT}/JuceLibraryCode)
target_include_directories(${PROJECT_NAME}.html PRIVATE ${JUCE_MODULE_PATH})
set_target_properties(${PROJECT_NAME}.html PROPERTIES LINK_FLAGS ā€œā€“source-map-base http://localhost:6931/Builds/Emscripten/cmake-build-debug/ -s DEMANGLE_SUPPORT=1 -s USE_PTHREADS=1 -s USE_SDL=2 -s EXTRA_EXPORTED_RUNTIME_METHODS=[ā€˜cwrapā€™] -s EXPORTED_FUNCTIONS="[ā€˜_mainā€™, ā€˜_deliverMessageā€™, ā€˜_repaintPeerā€™, ā€˜_juce_mouseCallbackā€™]" --preload-file ${PROJECT_SOURCE_DIR}/ā€¦/ā€¦/Resources@ --bindā€)

find_package (Threads)
target_link_libraries (${PROJECT_NAME}.html ${CMAKE_THREAD_LIBS_INIT})

add_definitions(
-DLINUX=1
-DJUCE_USE_FREETYPE=1
-DJUCE_USE_FREETYPE_AMALGAMATED=1
-Dregister=/**/
-DJUCER_LINUX_MAKE_6D53C8B4=1
-DJUCE_APP_VERSION=1.0.0
-DJUCE_APP_VERSION_HEX=0x10000
-D_NL_IDENTIFICATION_LANGUAGE=0x42
-D_NL_IDENTIFICATION_TERRITORY=0x43
)

ADD_CUSTOM_COMMAND(
TARGET ${PROJECT_NAME}.html
POST_BUILD
COMMAND ${PROJECT_SOURCE_DIR}/remap-source-map.py ${PROJECT_BINARY_DIR}/JuceConsoleApp.wasm.map
WORKING_DIRECTORY ${EXECUTABLE_OUTPUT_PATH}

)

1 Like

looks great. Would you share your port with us?

Unfortunately, thereā€™s currently a big caveat:

Meaning it currently does not work in all browsers out of the box. So right now my port is of limited utility.

Well I strongly believe this will come back pretty fast since the demand is pretty big for such kind of software. I would really like to participate in a open source project like this.

So, now pthreads are coming back in chrome (https://developers.google.com/web/updates/2018/10/wasm-threads), so this will be much easier, donā€™t you think so?

Iā€™m using exactly this mechanism and it works great after you enable those features. But itā€™s not enabled by default (yet).

Yes, I know but this will be back very soon, so I am sure we could start developing now. I know I could start a fork myself, but I do see any reason to make doubled work for this. Thatā€™s why I asked for your current work. After some time and testing it might go upstream to the main branch of JUCE as well.

Thereā€™s a relevant talk coming up at ADC from Jari Kleimola (AmpTrack Technologies):

https://juce.com/adc/programme/talks/juce-web-browsers

What ever happened with this? ā€œJUCE plugins for web browsersā€

You can watch the talk on YouTube: https://www.youtube.com/watch?v=ORIpeFQqR9c

Thank you.